@lets-events/react 11.2.0 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +1728 -209
- package/dist/index.d.ts +1728 -209
- package/dist/index.js +524 -176
- package/dist/index.mjs +496 -148
- package/package.json +1 -1
- package/src/components/Badge.tsx +1 -4
- package/src/components/Button/index.tsx +12 -9
- package/src/components/Button/styledComponents.ts +14 -3
- package/src/components/CheckboxGroup.tsx +129 -147
- package/src/components/Drawer/index.tsx +48 -0
- package/src/components/Drawer/styledComponents.ts +46 -0
- package/src/components/FormFields/MultiSelectFormField.tsx +65 -0
- package/src/components/MenuDropdown/index.tsx +30 -0
- package/src/components/MenuDropdown/styledComponents.ts +31 -0
- package/src/components/MultiSelect.tsx +216 -0
- package/src/components/Text.tsx +1 -2
- package/src/index.tsx +4 -0
package/dist/index.js
CHANGED
|
@@ -1037,6 +1037,7 @@ __export(index_exports, {
|
|
|
1037
1037
|
CheckboxItem: () => CheckboxItem,
|
|
1038
1038
|
Container: () => Container,
|
|
1039
1039
|
ContainerStyled: () => ContainerStyled,
|
|
1040
|
+
Drawer: () => Drawer,
|
|
1040
1041
|
DropdownMenu: () => DropdownMenu2,
|
|
1041
1042
|
DropdownMenuItem: () => DropdownMenuItem,
|
|
1042
1043
|
ErrorFormMessage: () => ErrorFormMessage,
|
|
@@ -1050,7 +1051,10 @@ __export(index_exports, {
|
|
|
1050
1051
|
GridStyled: () => GridStyled,
|
|
1051
1052
|
Icon: () => Icon,
|
|
1052
1053
|
InputStyled: () => InputStyled,
|
|
1054
|
+
MenuDropdown: () => MenuDropdown,
|
|
1053
1055
|
Modal: () => Modal,
|
|
1056
|
+
MultiSelect: () => MultiSelect,
|
|
1057
|
+
MultiSelectFormField: () => MultiSelectFormField,
|
|
1054
1058
|
RadioGroup: () => RadioGroup,
|
|
1055
1059
|
RadioGroupStyled: () => RadioGroupStyled,
|
|
1056
1060
|
RadioItem: () => RadioItem,
|
|
@@ -1648,7 +1652,6 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
|
1648
1652
|
var TextStyle = styled(import_themes.Text, {
|
|
1649
1653
|
fontFamily: "$default",
|
|
1650
1654
|
lineHeight: "$base",
|
|
1651
|
-
color: "$grey950",
|
|
1652
1655
|
variants: {
|
|
1653
1656
|
typography: typographyValues,
|
|
1654
1657
|
fontWeight: {
|
|
@@ -1665,7 +1668,7 @@ function Text(_a) {
|
|
|
1665
1668
|
TextStyle,
|
|
1666
1669
|
__spreadProps(__spreadValues({}, props), {
|
|
1667
1670
|
css: __spreadValues({
|
|
1668
|
-
color: color ? "$" + color : "$
|
|
1671
|
+
color: color ? "$" + color : "$dark600"
|
|
1669
1672
|
}, props.css)
|
|
1670
1673
|
})
|
|
1671
1674
|
);
|
|
@@ -1914,6 +1917,19 @@ var ButtonStyled = styled(import_themes2.Button, {
|
|
|
1914
1917
|
borderColor: "$colors$neutral100",
|
|
1915
1918
|
$$buttonColor: "$colors$neutral300"
|
|
1916
1919
|
}
|
|
1920
|
+
},
|
|
1921
|
+
menuDropdownItem: {
|
|
1922
|
+
backgroundColor: "transparent",
|
|
1923
|
+
boxShadow: "none",
|
|
1924
|
+
padding: "0.25rem 0.5rem",
|
|
1925
|
+
border: 0,
|
|
1926
|
+
height: "unset",
|
|
1927
|
+
color: "$$buttonColor",
|
|
1928
|
+
width: "100%",
|
|
1929
|
+
borderRadius: 0,
|
|
1930
|
+
"&:hover": {
|
|
1931
|
+
backgroundColor: "$dark100"
|
|
1932
|
+
}
|
|
1917
1933
|
}
|
|
1918
1934
|
},
|
|
1919
1935
|
fontWeight: {
|
|
@@ -3064,10 +3080,10 @@ var import_themes9 = require("@radix-ui/themes");
|
|
|
3064
3080
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
3065
3081
|
var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
|
|
3066
3082
|
fontFamily: "$default",
|
|
3067
|
-
|
|
3083
|
+
svg: {
|
|
3068
3084
|
display: "none"
|
|
3069
3085
|
},
|
|
3070
|
-
|
|
3086
|
+
label: {
|
|
3071
3087
|
display: "flex",
|
|
3072
3088
|
alignItems: "center",
|
|
3073
3089
|
gap: "$8",
|
|
@@ -3110,7 +3126,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
|
|
|
3110
3126
|
variants: {
|
|
3111
3127
|
color: {
|
|
3112
3128
|
success: {
|
|
3113
|
-
|
|
3129
|
+
label: {
|
|
3114
3130
|
"&:focus button, &:hover button": {
|
|
3115
3131
|
boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
|
|
3116
3132
|
}
|
|
@@ -3125,7 +3141,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
|
|
|
3125
3141
|
},
|
|
3126
3142
|
blue: {},
|
|
3127
3143
|
error: {
|
|
3128
|
-
|
|
3144
|
+
label: {
|
|
3129
3145
|
"&:focus button, &:hover button": {
|
|
3130
3146
|
boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
|
|
3131
3147
|
}
|
|
@@ -3141,7 +3157,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
|
|
|
3141
3157
|
},
|
|
3142
3158
|
disabled: {
|
|
3143
3159
|
true: {
|
|
3144
|
-
|
|
3160
|
+
label: {
|
|
3145
3161
|
cursor: "not-allowed",
|
|
3146
3162
|
opacity: 0.5,
|
|
3147
3163
|
"&:focus button, &:hover button": {
|
|
@@ -3167,7 +3183,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
|
|
|
3167
3183
|
color: "blue",
|
|
3168
3184
|
disabled: false,
|
|
3169
3185
|
css: {
|
|
3170
|
-
|
|
3186
|
+
label: {
|
|
3171
3187
|
"&:focus button, &:hover button": {
|
|
3172
3188
|
boxShadow: "0px 0px 0px 4px rgba(56, 129, 255, 0.50)"
|
|
3173
3189
|
}
|
|
@@ -3225,21 +3241,14 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
|
|
|
3225
3241
|
disabled: false
|
|
3226
3242
|
}
|
|
3227
3243
|
});
|
|
3244
|
+
var StyledItem = styled(import_themes9.CheckboxGroup.Item, {});
|
|
3228
3245
|
function CheckboxGroup(_a) {
|
|
3229
|
-
var _b = _a, {
|
|
3230
|
-
children
|
|
3231
|
-
} = _b, props = __objRest(_b, [
|
|
3232
|
-
"children"
|
|
3233
|
-
]);
|
|
3246
|
+
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
3234
3247
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
3235
3248
|
}
|
|
3236
3249
|
function CheckboxItem(_a) {
|
|
3237
|
-
var _b = _a, {
|
|
3238
|
-
|
|
3239
|
-
} = _b, props = __objRest(_b, [
|
|
3240
|
-
"children"
|
|
3241
|
-
]);
|
|
3242
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.CheckboxGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
|
|
3250
|
+
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
3251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledItem, __spreadProps(__spreadValues({}, props), { children }));
|
|
3243
3252
|
}
|
|
3244
3253
|
|
|
3245
3254
|
// src/components/Filter.tsx
|
|
@@ -3534,9 +3543,6 @@ var BadgeStyled = styled(import_themes12.Badge, {
|
|
|
3534
3543
|
fontFamily: "$default",
|
|
3535
3544
|
borderRadius: "$sm",
|
|
3536
3545
|
verticalAlign: "middle",
|
|
3537
|
-
"svg": {
|
|
3538
|
-
marginRight: "10px"
|
|
3539
|
-
},
|
|
3540
3546
|
variants: {
|
|
3541
3547
|
color: {
|
|
3542
3548
|
primary: {
|
|
@@ -3710,13 +3716,60 @@ function Modal(_a) {
|
|
|
3710
3716
|
] }));
|
|
3711
3717
|
}
|
|
3712
3718
|
|
|
3719
|
+
// src/components/MenuDropdown/index.tsx
|
|
3720
|
+
var import_react4 = require("react");
|
|
3721
|
+
|
|
3722
|
+
// src/components/MenuDropdown/styledComponents.ts
|
|
3723
|
+
var MenuDropdownContainerStyled = styled("div", {
|
|
3724
|
+
position: "relative",
|
|
3725
|
+
width: "fit-content"
|
|
3726
|
+
});
|
|
3727
|
+
var TriggerButtonStyled = styled("button", {
|
|
3728
|
+
backgroundColor: "$brand500",
|
|
3729
|
+
boxShadow: "0px 4px 4px 0px #23354314",
|
|
3730
|
+
borderRadius: "$full",
|
|
3731
|
+
border: "none",
|
|
3732
|
+
height: "1.875rem",
|
|
3733
|
+
width: "1.875rem",
|
|
3734
|
+
cursor: "pointer"
|
|
3735
|
+
});
|
|
3736
|
+
var MenuItemsContainerStyled = styled("div", {
|
|
3737
|
+
position: "absolute",
|
|
3738
|
+
right: 0,
|
|
3739
|
+
top: "2.125rem",
|
|
3740
|
+
zIndex: "999",
|
|
3741
|
+
width: "fit-content",
|
|
3742
|
+
minWidth: "5rem",
|
|
3743
|
+
background: "#fff",
|
|
3744
|
+
maxWidth: "18.75rem",
|
|
3745
|
+
margin: "auto",
|
|
3746
|
+
boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.0784313725)",
|
|
3747
|
+
border: "1px solid $dark300",
|
|
3748
|
+
borderRadius: "0.5rem",
|
|
3749
|
+
padding: "0.5rem 0",
|
|
3750
|
+
height: "fit-content"
|
|
3751
|
+
});
|
|
3752
|
+
|
|
3753
|
+
// src/components/MenuDropdown/index.tsx
|
|
3754
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3755
|
+
function MenuDropdown({ children }) {
|
|
3756
|
+
const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
|
|
3757
|
+
function handleMenuDropdown() {
|
|
3758
|
+
setIsOpen(!isOpen);
|
|
3759
|
+
}
|
|
3760
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MenuDropdownContainerStyled, { children: [
|
|
3761
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TriggerButtonStyled, { onClick: handleMenuDropdown, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon_default, { name: "ellipsis", size: "xl", color: "#FFFFFF" }) }),
|
|
3762
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuItemsContainerStyled, { children })
|
|
3763
|
+
] });
|
|
3764
|
+
}
|
|
3765
|
+
|
|
3713
3766
|
// src/components/Calendar/index.tsx
|
|
3714
|
-
var
|
|
3767
|
+
var import_react6 = require("react");
|
|
3715
3768
|
|
|
3716
3769
|
// src/hooks/useOnClickOutside.tsx
|
|
3717
|
-
var
|
|
3770
|
+
var import_react5 = require("react");
|
|
3718
3771
|
function useOnClickOutside(ref, handler) {
|
|
3719
|
-
(0,
|
|
3772
|
+
(0, import_react5.useEffect)(() => {
|
|
3720
3773
|
const listener = (event) => {
|
|
3721
3774
|
if (!ref.current || ref.current.contains(event.target)) {
|
|
3722
3775
|
return;
|
|
@@ -7829,7 +7882,7 @@ var DayPickerWrapperStyled = styled("div", {
|
|
|
7829
7882
|
});
|
|
7830
7883
|
|
|
7831
7884
|
// src/components/Calendar/index.tsx
|
|
7832
|
-
var
|
|
7885
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
7833
7886
|
function formatToDateMask(value) {
|
|
7834
7887
|
const numeric = value.replace(/\D/g, "").slice(0, 8);
|
|
7835
7888
|
const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/);
|
|
@@ -7853,15 +7906,15 @@ function Calendar(_a) {
|
|
|
7853
7906
|
"setSelected",
|
|
7854
7907
|
"position"
|
|
7855
7908
|
]);
|
|
7856
|
-
const [inputValue, setInputValue] = (0,
|
|
7857
|
-
const [showContainer, setShowCalendar] = (0,
|
|
7858
|
-
const dropdownRef = (0,
|
|
7909
|
+
const [inputValue, setInputValue] = (0, import_react6.useState)("");
|
|
7910
|
+
const [showContainer, setShowCalendar] = (0, import_react6.useState)(false);
|
|
7911
|
+
const dropdownRef = (0, import_react6.useRef)(null);
|
|
7859
7912
|
useOnClickOutside(dropdownRef, () => {
|
|
7860
7913
|
setShowCalendar(false);
|
|
7861
7914
|
});
|
|
7862
7915
|
const today = /* @__PURE__ */ new Date();
|
|
7863
7916
|
const maxDate = addYears(today, 20);
|
|
7864
|
-
(0,
|
|
7917
|
+
(0, import_react6.useEffect)(() => {
|
|
7865
7918
|
if (selected) {
|
|
7866
7919
|
setInputValue(format2(selected, "dd/MM/yyyy"));
|
|
7867
7920
|
} else {
|
|
@@ -7878,13 +7931,13 @@ function Calendar(_a) {
|
|
|
7878
7931
|
console.warn("Data inv\xE1lida inserida no input:", masked);
|
|
7879
7932
|
}
|
|
7880
7933
|
};
|
|
7881
|
-
return /* @__PURE__ */ (0,
|
|
7882
|
-
/* @__PURE__ */ (0,
|
|
7934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
|
|
7935
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7883
7936
|
CalendarButtonStyled,
|
|
7884
7937
|
{
|
|
7885
7938
|
type: "button",
|
|
7886
7939
|
onClick: () => setShowCalendar((prev) => !prev),
|
|
7887
|
-
children: /* @__PURE__ */ (0,
|
|
7940
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7888
7941
|
TextField,
|
|
7889
7942
|
{
|
|
7890
7943
|
placeholder: "00/00/0000",
|
|
@@ -7893,17 +7946,17 @@ function Calendar(_a) {
|
|
|
7893
7946
|
onChange: handleInputChange,
|
|
7894
7947
|
inputMode: "numeric",
|
|
7895
7948
|
textAlign: "right",
|
|
7896
|
-
children: /* @__PURE__ */ (0,
|
|
7949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
|
|
7897
7950
|
}
|
|
7898
7951
|
)
|
|
7899
7952
|
}
|
|
7900
7953
|
),
|
|
7901
|
-
showContainer && /* @__PURE__ */ (0,
|
|
7954
|
+
showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7902
7955
|
CalendarContentStyled,
|
|
7903
7956
|
{
|
|
7904
7957
|
style: position === "top" ? { bottom: "110%" } : { top: "110%" },
|
|
7905
7958
|
children: [
|
|
7906
|
-
/* @__PURE__ */ (0,
|
|
7959
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7907
7960
|
import_react_day_picker.DayPicker,
|
|
7908
7961
|
{
|
|
7909
7962
|
mode: "single",
|
|
@@ -7917,7 +7970,7 @@ function Calendar(_a) {
|
|
|
7917
7970
|
endMonth: maxDate
|
|
7918
7971
|
}
|
|
7919
7972
|
) }) }),
|
|
7920
|
-
action && /* @__PURE__ */ (0,
|
|
7973
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7921
7974
|
Button,
|
|
7922
7975
|
{
|
|
7923
7976
|
variant: "text",
|
|
@@ -7937,9 +7990,82 @@ function Calendar(_a) {
|
|
|
7937
7990
|
] })) });
|
|
7938
7991
|
}
|
|
7939
7992
|
|
|
7993
|
+
// src/components/Drawer/styledComponents.ts
|
|
7994
|
+
var DrawerOverlayStyled = styled("div", {
|
|
7995
|
+
position: "fixed",
|
|
7996
|
+
top: 0,
|
|
7997
|
+
right: 0,
|
|
7998
|
+
width: "100vw",
|
|
7999
|
+
height: "100vh",
|
|
8000
|
+
background: "rgba(0, 0, 0, 0.4)",
|
|
8001
|
+
zIndex: 1e3
|
|
8002
|
+
});
|
|
8003
|
+
var DrawerContainerStyled = styled("div", {
|
|
8004
|
+
position: "absolute",
|
|
8005
|
+
top: 0,
|
|
8006
|
+
right: 0,
|
|
8007
|
+
maxWidth: "calc(100% - 2rem)",
|
|
8008
|
+
height: "100%",
|
|
8009
|
+
background: "$neutral50",
|
|
8010
|
+
display: "flex",
|
|
8011
|
+
flexDirection: "column",
|
|
8012
|
+
boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
|
|
8013
|
+
padding: "1.5rem 0",
|
|
8014
|
+
overflowY: "auto"
|
|
8015
|
+
});
|
|
8016
|
+
var DrawerHeaderDiv = styled("div", {
|
|
8017
|
+
display: "flex",
|
|
8018
|
+
justifyContent: "space-between",
|
|
8019
|
+
alignItems: "center",
|
|
8020
|
+
borderBottom: "1px solid $neutral300",
|
|
8021
|
+
padding: "0 1.5rem 1rem",
|
|
8022
|
+
position: "relative"
|
|
8023
|
+
});
|
|
8024
|
+
var DrawerHeaderTitle = styled("h2", {
|
|
8025
|
+
fontSize: "1.125rem",
|
|
8026
|
+
fontWeight: "400",
|
|
8027
|
+
fontFamily: "Work Sans",
|
|
8028
|
+
color: "$dark800",
|
|
8029
|
+
margin: "0"
|
|
8030
|
+
});
|
|
8031
|
+
var DrawerHeaderCloseButton = styled("button", {
|
|
8032
|
+
background: "none",
|
|
8033
|
+
border: "none",
|
|
8034
|
+
cursor: "pointer"
|
|
8035
|
+
});
|
|
8036
|
+
|
|
8037
|
+
// src/components/Drawer/index.tsx
|
|
8038
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
8039
|
+
function Drawer({
|
|
8040
|
+
isOpen,
|
|
8041
|
+
onClose,
|
|
8042
|
+
width,
|
|
8043
|
+
backgroundColor,
|
|
8044
|
+
title,
|
|
8045
|
+
children
|
|
8046
|
+
}) {
|
|
8047
|
+
if (!isOpen) return null;
|
|
8048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerOverlayStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
8049
|
+
DrawerContainerStyled,
|
|
8050
|
+
{
|
|
8051
|
+
style: {
|
|
8052
|
+
width: width != null ? width : "34.25rem",
|
|
8053
|
+
backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
|
|
8054
|
+
},
|
|
8055
|
+
children: [
|
|
8056
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
|
|
8057
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title }),
|
|
8058
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
|
|
8059
|
+
] }),
|
|
8060
|
+
children
|
|
8061
|
+
]
|
|
8062
|
+
}
|
|
8063
|
+
) });
|
|
8064
|
+
}
|
|
8065
|
+
|
|
7940
8066
|
// src/components/TimePicker.tsx
|
|
7941
|
-
var
|
|
7942
|
-
var
|
|
8067
|
+
var import_react7 = require("react");
|
|
8068
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
7943
8069
|
var TimePickerStyled = styled("div", {
|
|
7944
8070
|
position: "relative",
|
|
7945
8071
|
fontFamily: "$default",
|
|
@@ -8042,14 +8168,14 @@ function TimePicker({
|
|
|
8042
8168
|
setSelected,
|
|
8043
8169
|
position = "bottom"
|
|
8044
8170
|
}) {
|
|
8045
|
-
const [hours, setHours] = (0,
|
|
8046
|
-
const [minutes, setMinutes] = (0,
|
|
8047
|
-
const [rawHours, setRawHours] = (0,
|
|
8048
|
-
const [rawMinutes, setRawMinutes] = (0,
|
|
8049
|
-
const [isOpen, setIsOpen] = (0,
|
|
8050
|
-
const dropdownRef = (0,
|
|
8171
|
+
const [hours, setHours] = (0, import_react7.useState)("00");
|
|
8172
|
+
const [minutes, setMinutes] = (0, import_react7.useState)("00");
|
|
8173
|
+
const [rawHours, setRawHours] = (0, import_react7.useState)("00");
|
|
8174
|
+
const [rawMinutes, setRawMinutes] = (0, import_react7.useState)("00");
|
|
8175
|
+
const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
|
|
8176
|
+
const dropdownRef = (0, import_react7.useRef)(null);
|
|
8051
8177
|
useOnClickOutside(dropdownRef, () => setIsOpen(false));
|
|
8052
|
-
const handleIncrement = (0,
|
|
8178
|
+
const handleIncrement = (0, import_react7.useCallback)(
|
|
8053
8179
|
(type) => {
|
|
8054
8180
|
if (type === "hours") {
|
|
8055
8181
|
const next = (parseInt(hours) + 1) % 24;
|
|
@@ -8063,7 +8189,7 @@ function TimePicker({
|
|
|
8063
8189
|
},
|
|
8064
8190
|
[hours, minutes]
|
|
8065
8191
|
);
|
|
8066
|
-
const handleDecrement = (0,
|
|
8192
|
+
const handleDecrement = (0, import_react7.useCallback)(
|
|
8067
8193
|
(type) => {
|
|
8068
8194
|
if (type === "hours") {
|
|
8069
8195
|
const prev = (parseInt(hours) - 1 + 24) % 24;
|
|
@@ -8077,13 +8203,13 @@ function TimePicker({
|
|
|
8077
8203
|
},
|
|
8078
8204
|
[hours, minutes]
|
|
8079
8205
|
);
|
|
8080
|
-
return /* @__PURE__ */ (0,
|
|
8081
|
-
/* @__PURE__ */ (0,
|
|
8206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TimePickerStyled, { ref: dropdownRef, children: [
|
|
8207
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8082
8208
|
TimePickerButtonStyled,
|
|
8083
8209
|
{
|
|
8084
8210
|
type: "button",
|
|
8085
8211
|
onClick: () => setIsOpen((prev) => !prev),
|
|
8086
|
-
children: /* @__PURE__ */ (0,
|
|
8212
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8087
8213
|
TextField,
|
|
8088
8214
|
{
|
|
8089
8215
|
value: selected,
|
|
@@ -8092,18 +8218,18 @@ function TimePicker({
|
|
|
8092
8218
|
placeholder: "00:00",
|
|
8093
8219
|
typography: "labelSmall",
|
|
8094
8220
|
fontWeight: "regular",
|
|
8095
|
-
children: /* @__PURE__ */ (0,
|
|
8221
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "clock", size: "xl" }) })
|
|
8096
8222
|
}
|
|
8097
8223
|
)
|
|
8098
8224
|
}
|
|
8099
8225
|
),
|
|
8100
|
-
isOpen && /* @__PURE__ */ (0,
|
|
8226
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
8101
8227
|
TimePickerDropdownStyled,
|
|
8102
8228
|
{
|
|
8103
8229
|
style: position === "top" ? { bottom: "110%" } : { top: "110%" },
|
|
8104
8230
|
children: [
|
|
8105
|
-
/* @__PURE__ */ (0,
|
|
8106
|
-
["hours", "minutes"].map((unit) => /* @__PURE__ */ (0,
|
|
8231
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TimerPickerContentStyled, { children: [
|
|
8232
|
+
["hours", "minutes"].map((unit) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
8107
8233
|
Box,
|
|
8108
8234
|
{
|
|
8109
8235
|
style: {
|
|
@@ -8112,13 +8238,13 @@ function TimePicker({
|
|
|
8112
8238
|
flexDirection: "column"
|
|
8113
8239
|
},
|
|
8114
8240
|
children: [
|
|
8115
|
-
/* @__PURE__ */ (0,
|
|
8241
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8116
8242
|
Button,
|
|
8117
8243
|
{
|
|
8118
8244
|
type: "button",
|
|
8119
8245
|
variant: "text",
|
|
8120
8246
|
onClick: () => handleIncrement(unit),
|
|
8121
|
-
children: /* @__PURE__ */ (0,
|
|
8247
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
8122
8248
|
"svg",
|
|
8123
8249
|
{
|
|
8124
8250
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -8127,14 +8253,14 @@ function TimePicker({
|
|
|
8127
8253
|
viewBox: "0 0 32 32",
|
|
8128
8254
|
fill: "none",
|
|
8129
8255
|
children: [
|
|
8130
|
-
/* @__PURE__ */ (0,
|
|
8256
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8131
8257
|
"path",
|
|
8132
8258
|
{
|
|
8133
8259
|
d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z",
|
|
8134
8260
|
fill: "white"
|
|
8135
8261
|
}
|
|
8136
8262
|
),
|
|
8137
|
-
/* @__PURE__ */ (0,
|
|
8263
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8138
8264
|
"path",
|
|
8139
8265
|
{
|
|
8140
8266
|
d: "M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z",
|
|
@@ -8146,7 +8272,7 @@ function TimePicker({
|
|
|
8146
8272
|
)
|
|
8147
8273
|
}
|
|
8148
8274
|
),
|
|
8149
|
-
/* @__PURE__ */ (0,
|
|
8275
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8150
8276
|
InputStyled,
|
|
8151
8277
|
{
|
|
8152
8278
|
inputMode: "numeric",
|
|
@@ -8184,13 +8310,13 @@ function TimePicker({
|
|
|
8184
8310
|
}
|
|
8185
8311
|
}
|
|
8186
8312
|
),
|
|
8187
|
-
/* @__PURE__ */ (0,
|
|
8313
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8188
8314
|
Button,
|
|
8189
8315
|
{
|
|
8190
8316
|
type: "button",
|
|
8191
8317
|
variant: "text",
|
|
8192
8318
|
onClick: () => handleDecrement(unit),
|
|
8193
|
-
children: /* @__PURE__ */ (0,
|
|
8319
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
8194
8320
|
"svg",
|
|
8195
8321
|
{
|
|
8196
8322
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -8199,14 +8325,14 @@ function TimePicker({
|
|
|
8199
8325
|
viewBox: "0 0 32 32",
|
|
8200
8326
|
fill: "none",
|
|
8201
8327
|
children: [
|
|
8202
|
-
/* @__PURE__ */ (0,
|
|
8328
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8203
8329
|
"path",
|
|
8204
8330
|
{
|
|
8205
8331
|
d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z",
|
|
8206
8332
|
fill: "white"
|
|
8207
8333
|
}
|
|
8208
8334
|
),
|
|
8209
|
-
/* @__PURE__ */ (0,
|
|
8335
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8210
8336
|
"path",
|
|
8211
8337
|
{
|
|
8212
8338
|
d: "M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z",
|
|
@@ -8222,9 +8348,9 @@ function TimePicker({
|
|
|
8222
8348
|
},
|
|
8223
8349
|
unit
|
|
8224
8350
|
)),
|
|
8225
|
-
/* @__PURE__ */ (0,
|
|
8351
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: ":" })
|
|
8226
8352
|
] }),
|
|
8227
|
-
/* @__PURE__ */ (0,
|
|
8353
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TimePickerFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8228
8354
|
Button,
|
|
8229
8355
|
{
|
|
8230
8356
|
type: "button",
|
|
@@ -8247,7 +8373,7 @@ function TimePicker({
|
|
|
8247
8373
|
|
|
8248
8374
|
// src/components/Alert.tsx
|
|
8249
8375
|
var import_themes14 = require("@radix-ui/themes");
|
|
8250
|
-
var
|
|
8376
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
8251
8377
|
var AlertDialogSimpleStyled = styled(import_themes14.AlertDialog.Content, {
|
|
8252
8378
|
fontFamily: "$default",
|
|
8253
8379
|
lineHeight: "$base",
|
|
@@ -8361,19 +8487,19 @@ function Alert(_a) {
|
|
|
8361
8487
|
"completAlert",
|
|
8362
8488
|
"simpleAlert"
|
|
8363
8489
|
]);
|
|
8364
|
-
return /* @__PURE__ */ (0,
|
|
8365
|
-
simpleAlert && /* @__PURE__ */ (0,
|
|
8366
|
-
/* @__PURE__ */ (0,
|
|
8367
|
-
/* @__PURE__ */ (0,
|
|
8368
|
-
/* @__PURE__ */ (0,
|
|
8369
|
-
simpleAlert.cancel && /* @__PURE__ */ (0,
|
|
8490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
8491
|
+
simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.AlertDialog.Root, { children: [
|
|
8492
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
|
|
8493
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
|
|
8494
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
|
|
8495
|
+
simpleAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "text", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "close" }) }) })
|
|
8370
8496
|
] })) })
|
|
8371
8497
|
] }) }),
|
|
8372
|
-
completAlert && /* @__PURE__ */ (0,
|
|
8373
|
-
/* @__PURE__ */ (0,
|
|
8374
|
-
/* @__PURE__ */ (0,
|
|
8375
|
-
/* @__PURE__ */ (0,
|
|
8376
|
-
color === "success" && /* @__PURE__ */ (0,
|
|
8498
|
+
completAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.AlertDialog.Root, { children: [
|
|
8499
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
|
|
8500
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogCompleteStyled, { children: [
|
|
8501
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
|
|
8502
|
+
color === "success" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
8377
8503
|
"svg",
|
|
8378
8504
|
{
|
|
8379
8505
|
width: "56",
|
|
@@ -8382,18 +8508,18 @@ function Alert(_a) {
|
|
|
8382
8508
|
fill: "none",
|
|
8383
8509
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8384
8510
|
children: [
|
|
8385
|
-
/* @__PURE__ */ (0,
|
|
8511
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { clipPath: "url(#clip0_1428_9995)", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8386
8512
|
"path",
|
|
8387
8513
|
{
|
|
8388
8514
|
d: "M28 56C35.4261 56 42.548 53.05 47.799 47.799C53.05 42.548 56 35.4261 56 28C56 20.5739 53.05 13.452 47.799 8.20101C42.548 2.94999 35.4261 0 28 0C20.5739 0 13.452 2.94999 8.20101 8.20101C2.94999 13.452 0 20.5739 0 28C0 35.4261 2.94999 42.548 8.20101 47.799C13.452 53.05 20.5739 56 28 56ZM40.3594 22.8594L26.3594 36.8594C25.3312 37.8875 23.6688 37.8875 22.6516 36.8594L15.6516 29.8594C14.6234 28.8312 14.6234 27.1688 15.6516 26.1516C16.6797 25.1344 18.3422 25.1234 19.3594 26.1516L24.5 31.2922L36.6406 19.1406C37.6688 18.1125 39.3312 18.1125 40.3484 19.1406C41.3656 20.1688 41.3766 21.8312 40.3484 22.8484L40.3594 22.8594Z",
|
|
8389
8515
|
fill: "#1E8535"
|
|
8390
8516
|
}
|
|
8391
8517
|
) }),
|
|
8392
|
-
/* @__PURE__ */ (0,
|
|
8518
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_1428_9995", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "56", height: "56", fill: "white" }) }) })
|
|
8393
8519
|
]
|
|
8394
8520
|
}
|
|
8395
8521
|
),
|
|
8396
|
-
color === "error" && /* @__PURE__ */ (0,
|
|
8522
|
+
color === "error" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
8397
8523
|
"svg",
|
|
8398
8524
|
{
|
|
8399
8525
|
width: "56",
|
|
@@ -8402,18 +8528,18 @@ function Alert(_a) {
|
|
|
8402
8528
|
fill: "none",
|
|
8403
8529
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8404
8530
|
children: [
|
|
8405
|
-
/* @__PURE__ */ (0,
|
|
8531
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { clipPath: "url(#clip0_1428_10022)", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8406
8532
|
"path",
|
|
8407
8533
|
{
|
|
8408
8534
|
d: "M28 56C35.4261 56 42.548 53.05 47.799 47.799C53.05 42.548 56 35.4261 56 28C56 20.5739 53.05 13.452 47.799 8.20101C42.548 2.94999 35.4261 0 28 0C20.5739 0 13.452 2.94999 8.20101 8.20101C2.94999 13.452 0 20.5739 0 28C0 35.4261 2.94999 42.548 8.20101 47.799C13.452 53.05 20.5739 56 28 56ZM19.1406 19.1406C20.1687 18.1125 21.8312 18.1125 22.8484 19.1406L27.9891 24.2812L33.1297 19.1406C34.1578 18.1125 35.8203 18.1125 36.8375 19.1406C37.8547 20.1687 37.8656 21.8312 36.8375 22.8484L31.6969 27.9891L36.8375 33.1297C37.8656 34.1578 37.8656 35.8203 36.8375 36.8375C35.8094 37.8547 34.1469 37.8656 33.1297 36.8375L27.9891 31.6969L22.8484 36.8375C21.8203 37.8656 20.1578 37.8656 19.1406 36.8375C18.1234 35.8094 18.1125 34.1469 19.1406 33.1297L24.2812 27.9891L19.1406 22.8484C18.1125 21.8203 18.1125 20.1578 19.1406 19.1406Z",
|
|
8409
8535
|
fill: "#AD1F2B"
|
|
8410
8536
|
}
|
|
8411
8537
|
) }),
|
|
8412
|
-
/* @__PURE__ */ (0,
|
|
8538
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_1428_10022", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "56", height: "56", fill: "white" }) }) })
|
|
8413
8539
|
]
|
|
8414
8540
|
}
|
|
8415
8541
|
),
|
|
8416
|
-
color === "warning" && /* @__PURE__ */ (0,
|
|
8542
|
+
color === "warning" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
8417
8543
|
"svg",
|
|
8418
8544
|
{
|
|
8419
8545
|
width: "56",
|
|
@@ -8422,18 +8548,18 @@ function Alert(_a) {
|
|
|
8422
8548
|
fill: "none",
|
|
8423
8549
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8424
8550
|
children: [
|
|
8425
|
-
/* @__PURE__ */ (0,
|
|
8551
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { clipPath: "url(#clip0_1428_10038)", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8426
8552
|
"path",
|
|
8427
8553
|
{
|
|
8428
8554
|
d: "M28 56C35.4261 56 42.548 53.05 47.799 47.799C53.05 42.548 56 35.4261 56 28C56 20.5739 53.05 13.452 47.799 8.20101C42.548 2.94999 35.4261 0 28 0C20.5739 0 13.452 2.94999 8.20101 8.20101C2.94999 13.452 0 20.5739 0 28C0 35.4261 2.94999 42.548 8.20101 47.799C13.452 53.05 20.5739 56 28 56ZM28 14C29.4547 14 30.625 15.1703 30.625 16.625V28.875C30.625 30.3297 29.4547 31.5 28 31.5C26.5453 31.5 25.375 30.3297 25.375 28.875V16.625C25.375 15.1703 26.5453 14 28 14ZM24.5 38.5C24.5 37.5717 24.8687 36.6815 25.5251 36.0251C26.1815 35.3688 27.0717 35 28 35C28.9283 35 29.8185 35.3688 30.4749 36.0251C31.1313 36.6815 31.5 37.5717 31.5 38.5C31.5 39.4283 31.1313 40.3185 30.4749 40.9749C29.8185 41.6312 28.9283 42 28 42C27.0717 42 26.1815 41.6312 25.5251 40.9749C24.8687 40.3185 24.5 39.4283 24.5 38.5Z",
|
|
8429
8555
|
fill: "#CC9A06"
|
|
8430
8556
|
}
|
|
8431
8557
|
) }),
|
|
8432
|
-
/* @__PURE__ */ (0,
|
|
8558
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_1428_10038", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "56", height: "56", fill: "white" }) }) })
|
|
8433
8559
|
]
|
|
8434
8560
|
}
|
|
8435
8561
|
),
|
|
8436
|
-
color === "info" && /* @__PURE__ */ (0,
|
|
8562
|
+
color === "info" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
8437
8563
|
"svg",
|
|
8438
8564
|
{
|
|
8439
8565
|
width: "40",
|
|
@@ -8442,35 +8568,35 @@ function Alert(_a) {
|
|
|
8442
8568
|
fill: "none",
|
|
8443
8569
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8444
8570
|
children: [
|
|
8445
|
-
/* @__PURE__ */ (0,
|
|
8571
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { clipPath: "url(#clip0_1645_46)", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8446
8572
|
"path",
|
|
8447
8573
|
{
|
|
8448
8574
|
d: "M20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40ZM20 10C21.0391 10 21.875 10.8359 21.875 11.875V20.625C21.875 21.6641 21.0391 22.5 20 22.5C18.9609 22.5 18.125 21.6641 18.125 20.625V11.875C18.125 10.8359 18.9609 10 20 10ZM17.5 27.5C17.5 26.837 17.7634 26.2011 18.2322 25.7322C18.7011 25.2634 19.337 25 20 25C20.663 25 21.2989 25.2634 21.7678 25.7322C22.2366 26.2011 22.5 26.837 22.5 27.5C22.5 28.163 22.2366 28.7989 21.7678 29.2678C21.2989 29.7366 20.663 30 20 30C19.337 30 18.7011 29.7366 18.2322 29.2678C17.7634 28.7989 17.5 28.163 17.5 27.5Z",
|
|
8449
8575
|
fill: "#9FB6C7"
|
|
8450
8576
|
}
|
|
8451
8577
|
) }),
|
|
8452
|
-
/* @__PURE__ */ (0,
|
|
8578
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_1645_46", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "40", height: "40", fill: "white" }) }) })
|
|
8453
8579
|
]
|
|
8454
8580
|
}
|
|
8455
8581
|
),
|
|
8456
|
-
completAlert.title && /* @__PURE__ */ (0,
|
|
8457
|
-
/* @__PURE__ */ (0,
|
|
8458
|
-
completAlert.subtitle && /* @__PURE__ */ (0,
|
|
8582
|
+
completAlert.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogTitleStyled, { children: completAlert.title }),
|
|
8583
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogDescriptionStyled, { children: [
|
|
8584
|
+
completAlert.subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8459
8585
|
Text,
|
|
8460
8586
|
{
|
|
8461
8587
|
css: {
|
|
8462
8588
|
fontSize: "$16"
|
|
8463
8589
|
},
|
|
8464
8590
|
asChild: true,
|
|
8465
|
-
children: /* @__PURE__ */ (0,
|
|
8591
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { children: completAlert.subtitle })
|
|
8466
8592
|
}
|
|
8467
8593
|
),
|
|
8468
8594
|
completAlert.description
|
|
8469
8595
|
] })
|
|
8470
8596
|
] }),
|
|
8471
|
-
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0,
|
|
8472
|
-
/* @__PURE__ */ (0,
|
|
8473
|
-
completAlert.onAction && /* @__PURE__ */ (0,
|
|
8597
|
+
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialoghrStyled, {}) : null,
|
|
8598
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", children: [
|
|
8599
|
+
completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8474
8600
|
Button,
|
|
8475
8601
|
{
|
|
8476
8602
|
variant: "contained",
|
|
@@ -8478,7 +8604,7 @@ function Alert(_a) {
|
|
|
8478
8604
|
children: completAlert.actionText || "Salvar"
|
|
8479
8605
|
}
|
|
8480
8606
|
) }),
|
|
8481
|
-
completAlert.cancel && /* @__PURE__ */ (0,
|
|
8607
|
+
completAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "outlined", color: "neutral", children: completAlert.cancelText || "Cancelar" }) })
|
|
8482
8608
|
] }) })
|
|
8483
8609
|
] })
|
|
8484
8610
|
] }) })
|
|
@@ -8487,7 +8613,7 @@ function Alert(_a) {
|
|
|
8487
8613
|
|
|
8488
8614
|
// src/components/Switch.tsx
|
|
8489
8615
|
var import_themes15 = require("@radix-ui/themes");
|
|
8490
|
-
var
|
|
8616
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
8491
8617
|
var SwitchStyled = styled(import_themes15.Switch, {
|
|
8492
8618
|
all: "unset",
|
|
8493
8619
|
borderRadius: "$full",
|
|
@@ -8581,13 +8707,13 @@ var SwitchStyled = styled(import_themes15.Switch, {
|
|
|
8581
8707
|
}
|
|
8582
8708
|
});
|
|
8583
8709
|
function Switch(props) {
|
|
8584
|
-
return /* @__PURE__ */ (0,
|
|
8710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SwitchStyled, __spreadValues({ color: "brand", defaultChecked: true }, props));
|
|
8585
8711
|
}
|
|
8586
8712
|
|
|
8587
8713
|
// src/components/Step.tsx
|
|
8588
|
-
var
|
|
8714
|
+
var import_react8 = __toESM(require("react"));
|
|
8589
8715
|
var import_themes16 = require("@radix-ui/themes");
|
|
8590
|
-
var
|
|
8716
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
8591
8717
|
var StepStyled = styled("div", {
|
|
8592
8718
|
fontFamily: "$default",
|
|
8593
8719
|
color: "$gray100",
|
|
@@ -8660,7 +8786,7 @@ var StepListStyled = styled(import_themes16.Tabs.List, {
|
|
|
8660
8786
|
});
|
|
8661
8787
|
function Step(_a) {
|
|
8662
8788
|
var _b = _a, { children, defaultValue } = _b, props = __objRest(_b, ["children", "defaultValue"]);
|
|
8663
|
-
return /* @__PURE__ */ (0,
|
|
8789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Tabs.Root, { defaultValue: String(defaultValue), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepStyled, __spreadProps(__spreadValues({}, props), { children })) });
|
|
8664
8790
|
}
|
|
8665
8791
|
function StepTrigger(_a) {
|
|
8666
8792
|
var _b = _a, {
|
|
@@ -8673,7 +8799,7 @@ function StepTrigger(_a) {
|
|
|
8673
8799
|
"currentStep"
|
|
8674
8800
|
]);
|
|
8675
8801
|
const isActiveOrPrevious = currentStep !== void 0 && value <= currentStep;
|
|
8676
|
-
return /* @__PURE__ */ (0,
|
|
8802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
8677
8803
|
StepTriggerStyled,
|
|
8678
8804
|
__spreadProps(__spreadValues({
|
|
8679
8805
|
"data-filled": isActiveOrPrevious,
|
|
@@ -8691,7 +8817,7 @@ function StepContent(_a) {
|
|
|
8691
8817
|
"value",
|
|
8692
8818
|
"children"
|
|
8693
8819
|
]);
|
|
8694
|
-
return /* @__PURE__ */ (0,
|
|
8820
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
|
|
8695
8821
|
}
|
|
8696
8822
|
function StepList(_a) {
|
|
8697
8823
|
var _b = _a, {
|
|
@@ -8701,9 +8827,9 @@ function StepList(_a) {
|
|
|
8701
8827
|
"children",
|
|
8702
8828
|
"currentStep"
|
|
8703
8829
|
]);
|
|
8704
|
-
return /* @__PURE__ */ (0,
|
|
8705
|
-
if (
|
|
8706
|
-
return
|
|
8830
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react8.default.Children.map(children, (child) => {
|
|
8831
|
+
if (import_react8.default.isValidElement(child) && child.type === StepTrigger) {
|
|
8832
|
+
return import_react8.default.cloneElement(child, { currentStep });
|
|
8707
8833
|
}
|
|
8708
8834
|
return child;
|
|
8709
8835
|
}) }));
|
|
@@ -8714,12 +8840,12 @@ function StepWrapper(_a) {
|
|
|
8714
8840
|
} = _b, props = __objRest(_b, [
|
|
8715
8841
|
"children"
|
|
8716
8842
|
]);
|
|
8717
|
-
return /* @__PURE__ */ (0,
|
|
8843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Box, __spreadProps(__spreadValues({}, props), { children }));
|
|
8718
8844
|
}
|
|
8719
8845
|
|
|
8720
8846
|
// src/components/Card.tsx
|
|
8721
8847
|
var import_themes17 = require("@radix-ui/themes");
|
|
8722
|
-
var
|
|
8848
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
8723
8849
|
var CardStyled = styled(import_themes17.Card, {
|
|
8724
8850
|
borderRadius: "$2xl",
|
|
8725
8851
|
border: "1px solid $dark100",
|
|
@@ -8755,13 +8881,13 @@ var CardStyled = styled(import_themes17.Card, {
|
|
|
8755
8881
|
});
|
|
8756
8882
|
function Card(_a) {
|
|
8757
8883
|
var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
|
|
8758
|
-
return /* @__PURE__ */ (0,
|
|
8884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8759
8885
|
}
|
|
8760
8886
|
|
|
8761
8887
|
// src/components/TextareaField.tsx
|
|
8762
8888
|
var import_themes18 = require("@radix-ui/themes");
|
|
8763
|
-
var
|
|
8764
|
-
var
|
|
8889
|
+
var import_react9 = __toESM(require("react"));
|
|
8890
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
8765
8891
|
var TextareaFieldStyle = styled(import_themes18.TextArea, {
|
|
8766
8892
|
display: "flex",
|
|
8767
8893
|
flex: 1,
|
|
@@ -8825,10 +8951,10 @@ var TextareaLimitIndicator = styled("div", {
|
|
|
8825
8951
|
padding: "$4"
|
|
8826
8952
|
}
|
|
8827
8953
|
});
|
|
8828
|
-
var TextareaField =
|
|
8954
|
+
var TextareaField = import_react9.default.forwardRef((_a, fowardedRef) => {
|
|
8829
8955
|
var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
|
|
8830
|
-
const inputRef = (0,
|
|
8831
|
-
const badgeRef = (0,
|
|
8956
|
+
const inputRef = (0, import_react9.useRef)(null);
|
|
8957
|
+
const badgeRef = (0, import_react9.useRef)(null);
|
|
8832
8958
|
const updateCharCountBadge = () => {
|
|
8833
8959
|
var _a2, _b2;
|
|
8834
8960
|
if (!maxLength || !badgeRef.current) return;
|
|
@@ -8840,8 +8966,8 @@ var TextareaField = import_react8.default.forwardRef((_a, fowardedRef) => {
|
|
|
8840
8966
|
updateCharCountBadge();
|
|
8841
8967
|
(_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
|
|
8842
8968
|
};
|
|
8843
|
-
return /* @__PURE__ */ (0,
|
|
8844
|
-
/* @__PURE__ */ (0,
|
|
8969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TextareaContainer, { color, children: [
|
|
8970
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
8845
8971
|
TextareaFieldStyle,
|
|
8846
8972
|
__spreadValues({
|
|
8847
8973
|
rows: 4,
|
|
@@ -8859,17 +8985,17 @@ var TextareaField = import_react8.default.forwardRef((_a, fowardedRef) => {
|
|
|
8859
8985
|
maxLength
|
|
8860
8986
|
}, props)
|
|
8861
8987
|
),
|
|
8862
|
-
maxLength && /* @__PURE__ */ (0,
|
|
8988
|
+
maxLength && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
|
|
8863
8989
|
] });
|
|
8864
8990
|
});
|
|
8865
8991
|
|
|
8866
8992
|
// src/components/Toast/components/ToastItem.tsx
|
|
8867
|
-
var
|
|
8993
|
+
var import_react11 = require("react");
|
|
8868
8994
|
|
|
8869
8995
|
// src/components/Toast/styles/index.ts
|
|
8870
|
-
var
|
|
8996
|
+
var import_react10 = require("@stitches/react");
|
|
8871
8997
|
var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
|
|
8872
|
-
var slideIn = (0,
|
|
8998
|
+
var slideIn = (0, import_react10.keyframes)({
|
|
8873
8999
|
from: {
|
|
8874
9000
|
transform: "translateX(calc(100% + 25px))",
|
|
8875
9001
|
opacity: 0
|
|
@@ -8879,7 +9005,7 @@ var slideIn = (0, import_react9.keyframes)({
|
|
|
8879
9005
|
opacity: 1
|
|
8880
9006
|
}
|
|
8881
9007
|
});
|
|
8882
|
-
var slideOut = (0,
|
|
9008
|
+
var slideOut = (0, import_react10.keyframes)({
|
|
8883
9009
|
from: {
|
|
8884
9010
|
transform: "translateX(0)",
|
|
8885
9011
|
opacity: 1
|
|
@@ -8889,7 +9015,7 @@ var slideOut = (0, import_react9.keyframes)({
|
|
|
8889
9015
|
opacity: 0
|
|
8890
9016
|
}
|
|
8891
9017
|
});
|
|
8892
|
-
var swipeOut = (0,
|
|
9018
|
+
var swipeOut = (0, import_react10.keyframes)({
|
|
8893
9019
|
from: {
|
|
8894
9020
|
transform: "translateX(var(--radix-toast-swipe-end-x))",
|
|
8895
9021
|
opacity: 1
|
|
@@ -8990,19 +9116,19 @@ var ToastClose = styled(ToastPrimitive.Close, {
|
|
|
8990
9116
|
});
|
|
8991
9117
|
|
|
8992
9118
|
// src/components/Toast/components/ToastItem.tsx
|
|
8993
|
-
var
|
|
9119
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
8994
9120
|
function ToastItem({
|
|
8995
9121
|
toast,
|
|
8996
9122
|
onRemove
|
|
8997
9123
|
}) {
|
|
8998
|
-
const [open, setOpen] = (0,
|
|
9124
|
+
const [open, setOpen] = (0, import_react11.useState)(true);
|
|
8999
9125
|
const handleOpenChange = (open2) => {
|
|
9000
9126
|
setOpen(open2);
|
|
9001
9127
|
if (!open2) {
|
|
9002
9128
|
onRemove(toast.id);
|
|
9003
9129
|
}
|
|
9004
9130
|
};
|
|
9005
|
-
return /* @__PURE__ */ (0,
|
|
9131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
9006
9132
|
ToastRoot,
|
|
9007
9133
|
{
|
|
9008
9134
|
type: toast.type,
|
|
@@ -9010,26 +9136,26 @@ function ToastItem({
|
|
|
9010
9136
|
open,
|
|
9011
9137
|
onOpenChange: handleOpenChange,
|
|
9012
9138
|
children: [
|
|
9013
|
-
(toast == null ? void 0 : toast.icon) && /* @__PURE__ */ (0,
|
|
9014
|
-
/* @__PURE__ */ (0,
|
|
9015
|
-
/* @__PURE__ */ (0,
|
|
9139
|
+
(toast == null ? void 0 : toast.icon) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: toast.icon, size: "xl" }),
|
|
9140
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { typography: "bodyS", fontWeight: "medium", children: toast.message }) }),
|
|
9141
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToastClose, { "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: "xmark", size: "md" }) })
|
|
9016
9142
|
]
|
|
9017
9143
|
}
|
|
9018
9144
|
);
|
|
9019
9145
|
}
|
|
9020
9146
|
|
|
9021
9147
|
// src/components/Toast/components/ToastProvider.tsx
|
|
9022
|
-
var
|
|
9148
|
+
var import_react12 = require("react");
|
|
9023
9149
|
var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
|
|
9024
|
-
var
|
|
9025
|
-
var ToastContext = (0,
|
|
9150
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
9151
|
+
var ToastContext = (0, import_react12.createContext)(null);
|
|
9026
9152
|
function ToastProvider({
|
|
9027
9153
|
children,
|
|
9028
9154
|
defaultDuration = 5e3,
|
|
9029
9155
|
maxToasts = 5,
|
|
9030
9156
|
swipeDirection = "right"
|
|
9031
9157
|
}) {
|
|
9032
|
-
const [toasts, setToasts] = (0,
|
|
9158
|
+
const [toasts, setToasts] = (0, import_react12.useState)([]);
|
|
9033
9159
|
const addToast = (toastData) => {
|
|
9034
9160
|
const id = Math.random().toString(36).substr(2, 9);
|
|
9035
9161
|
const newToast = __spreadProps(__spreadValues({
|
|
@@ -9057,17 +9183,17 @@ function ToastProvider({
|
|
|
9057
9183
|
removeToast,
|
|
9058
9184
|
removeAllToasts
|
|
9059
9185
|
};
|
|
9060
|
-
return /* @__PURE__ */ (0,
|
|
9186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ToastPrimitive2.Provider, { swipeDirection, children: [
|
|
9061
9187
|
children,
|
|
9062
|
-
toasts.map((toast) => /* @__PURE__ */ (0,
|
|
9063
|
-
/* @__PURE__ */ (0,
|
|
9188
|
+
toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToastItem, { toast, onRemove: removeToast }, toast.id)),
|
|
9189
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToastViewport, {})
|
|
9064
9190
|
] }) });
|
|
9065
9191
|
}
|
|
9066
9192
|
|
|
9067
9193
|
// src/components/Toast/hooks/useToast.ts
|
|
9068
|
-
var
|
|
9194
|
+
var import_react13 = require("react");
|
|
9069
9195
|
var useToast = () => {
|
|
9070
|
-
const context = (0,
|
|
9196
|
+
const context = (0, import_react13.useContext)(ToastContext);
|
|
9071
9197
|
if (!context) {
|
|
9072
9198
|
throw new Error("useToast deve ser usado dentro de um ToastProvider");
|
|
9073
9199
|
}
|
|
@@ -9076,7 +9202,7 @@ var useToast = () => {
|
|
|
9076
9202
|
|
|
9077
9203
|
// src/components/Tooltip/index.tsx
|
|
9078
9204
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
|
9079
|
-
var
|
|
9205
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
9080
9206
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
9081
9207
|
var TooltipRoot = TooltipPrimitive.Root;
|
|
9082
9208
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
@@ -9115,19 +9241,184 @@ function Tooltip({
|
|
|
9115
9241
|
delayDuration = 200,
|
|
9116
9242
|
side = "top"
|
|
9117
9243
|
}) {
|
|
9118
|
-
return /* @__PURE__ */ (0,
|
|
9119
|
-
/* @__PURE__ */ (0,
|
|
9120
|
-
/* @__PURE__ */ (0,
|
|
9121
|
-
typeof content === "string" ? /* @__PURE__ */ (0,
|
|
9122
|
-
/* @__PURE__ */ (0,
|
|
9244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipRoot, { delayDuration, children: [
|
|
9245
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children }),
|
|
9246
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipContent, { side, sideOffset: 5, children: [
|
|
9247
|
+
typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { typography: "tooltip", children: content }) : content,
|
|
9248
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipArrow, {})
|
|
9123
9249
|
] })
|
|
9124
9250
|
] }) });
|
|
9125
9251
|
}
|
|
9126
9252
|
|
|
9127
|
-
// src/components/
|
|
9253
|
+
// src/components/MultiSelect.tsx
|
|
9128
9254
|
var import_themes19 = require("@radix-ui/themes");
|
|
9129
|
-
var
|
|
9130
|
-
var
|
|
9255
|
+
var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
|
|
9256
|
+
var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
|
|
9257
|
+
var import_react14 = require("react");
|
|
9258
|
+
var import_react15 = __toESM(require("react"));
|
|
9259
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
9260
|
+
var StyledContent = styled(import_themes19.DropdownMenu.Content, {
|
|
9261
|
+
backgroundColor: "$dark50",
|
|
9262
|
+
borderRadius: "$sm",
|
|
9263
|
+
padding: "$8 0",
|
|
9264
|
+
boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
|
|
9265
|
+
boxSizing: "border-box",
|
|
9266
|
+
border: "1px solid $dark300"
|
|
9267
|
+
});
|
|
9268
|
+
var StyledTrigger = styled("div", {
|
|
9269
|
+
minHeight: "40px",
|
|
9270
|
+
borderRadius: "$sm",
|
|
9271
|
+
cursor: "pointer",
|
|
9272
|
+
display: "flex",
|
|
9273
|
+
justifyContent: "start",
|
|
9274
|
+
alignItems: "center",
|
|
9275
|
+
padding: "$6 $14",
|
|
9276
|
+
boxSizing: "border-box",
|
|
9277
|
+
gap: "4px",
|
|
9278
|
+
variants: {
|
|
9279
|
+
color: {
|
|
9280
|
+
default: {
|
|
9281
|
+
border: "1px solid $dark300"
|
|
9282
|
+
},
|
|
9283
|
+
error: {
|
|
9284
|
+
border: "1px solid $error400"
|
|
9285
|
+
}
|
|
9286
|
+
}
|
|
9287
|
+
},
|
|
9288
|
+
defaultVariants: {
|
|
9289
|
+
color: "default"
|
|
9290
|
+
}
|
|
9291
|
+
});
|
|
9292
|
+
var itemStyle = {
|
|
9293
|
+
padding: "$4 $16",
|
|
9294
|
+
minHeight: "$32",
|
|
9295
|
+
height: "32px",
|
|
9296
|
+
boxSizing: "border-box",
|
|
9297
|
+
backgroundColor: "$dark50",
|
|
9298
|
+
display: "block",
|
|
9299
|
+
"&:hover": {
|
|
9300
|
+
backgroundColor: "$dark100"
|
|
9301
|
+
}
|
|
9302
|
+
};
|
|
9303
|
+
var BadgeWrapper = styled("div", {
|
|
9304
|
+
flex: "1",
|
|
9305
|
+
display: "flex",
|
|
9306
|
+
justifyContent: "start",
|
|
9307
|
+
flexWrap: "wrap",
|
|
9308
|
+
gap: "4px"
|
|
9309
|
+
});
|
|
9310
|
+
var BadgeCloseBtn = styled("div", {
|
|
9311
|
+
borderRadius: "100%",
|
|
9312
|
+
width: "16px",
|
|
9313
|
+
height: "16px",
|
|
9314
|
+
minWidth: "16px",
|
|
9315
|
+
minHeight: "16px",
|
|
9316
|
+
display: "flex",
|
|
9317
|
+
justifyContent: "center",
|
|
9318
|
+
alignItems: "center",
|
|
9319
|
+
"&:hover": {
|
|
9320
|
+
backgroundColor: "$dark600"
|
|
9321
|
+
}
|
|
9322
|
+
});
|
|
9323
|
+
var MultiSelect = import_react15.default.forwardRef(
|
|
9324
|
+
({
|
|
9325
|
+
placeholder,
|
|
9326
|
+
value: selectedValues = [],
|
|
9327
|
+
onValueChange,
|
|
9328
|
+
options,
|
|
9329
|
+
color,
|
|
9330
|
+
width = "100%"
|
|
9331
|
+
}, fowardedRef) => {
|
|
9332
|
+
var _a;
|
|
9333
|
+
const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
|
|
9334
|
+
const triggerRef = (0, import_react14.useRef)(null);
|
|
9335
|
+
const labelByValue = (0, import_react14.useMemo)(() => {
|
|
9336
|
+
return options.reduce((prev, curr) => {
|
|
9337
|
+
return __spreadProps(__spreadValues({}, prev), {
|
|
9338
|
+
[curr.value]: curr.label
|
|
9339
|
+
});
|
|
9340
|
+
}, {});
|
|
9341
|
+
}, [options]);
|
|
9342
|
+
const handleRemove = (0, import_react14.useCallback)(
|
|
9343
|
+
(value) => {
|
|
9344
|
+
const newValue = selectedValues.filter((v) => v !== value);
|
|
9345
|
+
onValueChange == null ? void 0 : onValueChange(newValue);
|
|
9346
|
+
},
|
|
9347
|
+
[selectedValues, onValueChange]
|
|
9348
|
+
);
|
|
9349
|
+
const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
|
|
9350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
|
|
9351
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
9352
|
+
StyledTrigger,
|
|
9353
|
+
{
|
|
9354
|
+
css: {
|
|
9355
|
+
width
|
|
9356
|
+
},
|
|
9357
|
+
ref: (r) => {
|
|
9358
|
+
if (!r) return;
|
|
9359
|
+
triggerRef.current = r;
|
|
9360
|
+
if (fowardedRef) {
|
|
9361
|
+
if (typeof fowardedRef === "function") fowardedRef(r);
|
|
9362
|
+
else {
|
|
9363
|
+
fowardedRef.current = r;
|
|
9364
|
+
}
|
|
9365
|
+
}
|
|
9366
|
+
},
|
|
9367
|
+
color,
|
|
9368
|
+
children: [
|
|
9369
|
+
selectedValues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelMedium", css: { flex: 1 }, children: placeholder != null ? placeholder : "Selecione" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BadgeWrapper, { children: selectedValues.map((value) => {
|
|
9370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { size: "sm", color: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex2, { justify: "between", align: "center", children: [
|
|
9371
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "badgeSmall", color: "dark100", children: labelByValue[value] }),
|
|
9372
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9373
|
+
BadgeCloseBtn,
|
|
9374
|
+
{
|
|
9375
|
+
onClick: (e) => {
|
|
9376
|
+
e.stopPropagation();
|
|
9377
|
+
handleRemove(value);
|
|
9378
|
+
},
|
|
9379
|
+
role: "button",
|
|
9380
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faX, size: "xs" })
|
|
9381
|
+
}
|
|
9382
|
+
)
|
|
9383
|
+
] }) }, value);
|
|
9384
|
+
}) }),
|
|
9385
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9386
|
+
import_react_fontawesome2.FontAwesomeIcon,
|
|
9387
|
+
{
|
|
9388
|
+
icon: isOpen ? import_free_solid_svg_icons2.faChevronUp : import_free_solid_svg_icons2.faChevronDown,
|
|
9389
|
+
size: "sm",
|
|
9390
|
+
color: colors.dark600
|
|
9391
|
+
}
|
|
9392
|
+
)
|
|
9393
|
+
]
|
|
9394
|
+
}
|
|
9395
|
+
) }),
|
|
9396
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9397
|
+
StyledContent,
|
|
9398
|
+
{
|
|
9399
|
+
css: {
|
|
9400
|
+
width: menuWidth ? menuWidth + "px" : width
|
|
9401
|
+
},
|
|
9402
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9403
|
+
CheckboxGroup,
|
|
9404
|
+
{
|
|
9405
|
+
value: selectedValues,
|
|
9406
|
+
onValueChange: (v) => {
|
|
9407
|
+
onValueChange == null ? void 0 : onValueChange(v);
|
|
9408
|
+
},
|
|
9409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i)) })
|
|
9410
|
+
}
|
|
9411
|
+
)
|
|
9412
|
+
}
|
|
9413
|
+
)
|
|
9414
|
+
] }) });
|
|
9415
|
+
}
|
|
9416
|
+
);
|
|
9417
|
+
|
|
9418
|
+
// src/components/Grid.tsx
|
|
9419
|
+
var import_themes20 = require("@radix-ui/themes");
|
|
9420
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
9421
|
+
var GridStyled = styled(import_themes20.Grid, {
|
|
9131
9422
|
display: "grid",
|
|
9132
9423
|
variants: {
|
|
9133
9424
|
display: {
|
|
@@ -9248,13 +9539,13 @@ var GridStyled = styled(import_themes19.Grid, {
|
|
|
9248
9539
|
});
|
|
9249
9540
|
function Grid(_a) {
|
|
9250
9541
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
9251
|
-
return /* @__PURE__ */ (0,
|
|
9542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
9252
9543
|
}
|
|
9253
9544
|
|
|
9254
9545
|
// src/components/Container.tsx
|
|
9255
|
-
var
|
|
9256
|
-
var
|
|
9257
|
-
var ContainerStyled = styled(
|
|
9546
|
+
var import_themes21 = require("@radix-ui/themes");
|
|
9547
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
9548
|
+
var ContainerStyled = styled(import_themes21.Container, {
|
|
9258
9549
|
variants: {
|
|
9259
9550
|
size: {
|
|
9260
9551
|
xs: { maxWidth: "576px" },
|
|
@@ -9283,13 +9574,13 @@ var ContainerStyled = styled(import_themes20.Container, {
|
|
|
9283
9574
|
});
|
|
9284
9575
|
function Container(_a) {
|
|
9285
9576
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
9286
|
-
return /* @__PURE__ */ (0,
|
|
9577
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
9287
9578
|
}
|
|
9288
9579
|
|
|
9289
9580
|
// src/components/Section.tsx
|
|
9290
|
-
var
|
|
9291
|
-
var
|
|
9292
|
-
var SectionStyled = styled(
|
|
9581
|
+
var import_themes22 = require("@radix-ui/themes");
|
|
9582
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
9583
|
+
var SectionStyled = styled(import_themes22.Section, {
|
|
9293
9584
|
variants: {
|
|
9294
9585
|
size: {
|
|
9295
9586
|
xs: { maxWidth: "576px" },
|
|
@@ -9312,26 +9603,26 @@ var SectionStyled = styled(import_themes21.Section, {
|
|
|
9312
9603
|
});
|
|
9313
9604
|
function Section(_a) {
|
|
9314
9605
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
9315
|
-
return /* @__PURE__ */ (0,
|
|
9606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
9316
9607
|
}
|
|
9317
9608
|
|
|
9318
9609
|
// src/components/FormFields/ErrorFormMessage.tsx
|
|
9319
|
-
var
|
|
9320
|
-
var
|
|
9321
|
-
var
|
|
9610
|
+
var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
|
|
9611
|
+
var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
|
|
9612
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
9322
9613
|
var ErrorFormMessage = ({ message: message2 }) => {
|
|
9323
9614
|
if (!message2) return null;
|
|
9324
9615
|
if (typeof message2 !== "string") {
|
|
9325
9616
|
return null;
|
|
9326
9617
|
}
|
|
9327
|
-
return /* @__PURE__ */ (0,
|
|
9328
|
-
/* @__PURE__ */ (0,
|
|
9329
|
-
/* @__PURE__ */ (0,
|
|
9618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex2, { justify: "start", align: "center", gap: 6, children: [
|
|
9619
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faXmarkCircle, color: colors.error600, size: "1x" }),
|
|
9620
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
|
|
9330
9621
|
] });
|
|
9331
9622
|
};
|
|
9332
9623
|
|
|
9333
9624
|
// src/components/FormFields/FormLabel.tsx
|
|
9334
|
-
var
|
|
9625
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
9335
9626
|
var FormLabel = ({
|
|
9336
9627
|
name,
|
|
9337
9628
|
label,
|
|
@@ -9339,7 +9630,7 @@ var FormLabel = ({
|
|
|
9339
9630
|
required
|
|
9340
9631
|
}) => {
|
|
9341
9632
|
if (!label) return null;
|
|
9342
|
-
return /* @__PURE__ */ (0,
|
|
9633
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
9343
9634
|
Text,
|
|
9344
9635
|
{
|
|
9345
9636
|
typography: "labelMedium",
|
|
@@ -9348,7 +9639,7 @@ var FormLabel = ({
|
|
|
9348
9639
|
id: `${name}-label`,
|
|
9349
9640
|
children: [
|
|
9350
9641
|
label,
|
|
9351
|
-
!required && /* @__PURE__ */ (0,
|
|
9642
|
+
!required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { color: "dark500", children: " (opcional)" })
|
|
9352
9643
|
]
|
|
9353
9644
|
}
|
|
9354
9645
|
);
|
|
@@ -9356,7 +9647,7 @@ var FormLabel = ({
|
|
|
9356
9647
|
|
|
9357
9648
|
// src/components/FormFields/TextAreaFormField.tsx
|
|
9358
9649
|
var import_react_hook_form = require("react-hook-form");
|
|
9359
|
-
var
|
|
9650
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
9360
9651
|
var TextAreaFormField = ({
|
|
9361
9652
|
name,
|
|
9362
9653
|
label,
|
|
@@ -9370,8 +9661,8 @@ var TextAreaFormField = ({
|
|
|
9370
9661
|
} = (0, import_react_hook_form.useFormContext)();
|
|
9371
9662
|
const haveError = !!errors[name];
|
|
9372
9663
|
const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
|
|
9373
|
-
return /* @__PURE__ */ (0,
|
|
9374
|
-
/* @__PURE__ */ (0,
|
|
9664
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex2, { direction: "column", children: [
|
|
9665
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
9375
9666
|
FormLabel,
|
|
9376
9667
|
{
|
|
9377
9668
|
name,
|
|
@@ -9380,7 +9671,7 @@ var TextAreaFormField = ({
|
|
|
9380
9671
|
haveError
|
|
9381
9672
|
}
|
|
9382
9673
|
),
|
|
9383
|
-
/* @__PURE__ */ (0,
|
|
9674
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
9384
9675
|
TextareaField,
|
|
9385
9676
|
__spreadProps(__spreadValues({}, register(name, { required })), {
|
|
9386
9677
|
placeholder,
|
|
@@ -9388,13 +9679,13 @@ var TextAreaFormField = ({
|
|
|
9388
9679
|
"aria-labelledby": `${name}-label`
|
|
9389
9680
|
})
|
|
9390
9681
|
),
|
|
9391
|
-
/* @__PURE__ */ (0,
|
|
9682
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ErrorFormMessage, { message: errorMsg })
|
|
9392
9683
|
] });
|
|
9393
9684
|
};
|
|
9394
9685
|
|
|
9395
9686
|
// src/components/FormFields/TextFormField.tsx
|
|
9396
9687
|
var import_react_hook_form2 = require("react-hook-form");
|
|
9397
|
-
var
|
|
9688
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
9398
9689
|
var TextFormField = ({
|
|
9399
9690
|
name,
|
|
9400
9691
|
label,
|
|
@@ -9408,8 +9699,8 @@ var TextFormField = ({
|
|
|
9408
9699
|
} = (0, import_react_hook_form2.useFormContext)();
|
|
9409
9700
|
const haveError = !!errors[name];
|
|
9410
9701
|
const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
|
|
9411
|
-
return /* @__PURE__ */ (0,
|
|
9412
|
-
/* @__PURE__ */ (0,
|
|
9702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex2, { direction: "column", children: [
|
|
9703
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
9413
9704
|
FormLabel,
|
|
9414
9705
|
{
|
|
9415
9706
|
name,
|
|
@@ -9418,7 +9709,7 @@ var TextFormField = ({
|
|
|
9418
9709
|
haveError
|
|
9419
9710
|
}
|
|
9420
9711
|
),
|
|
9421
|
-
/* @__PURE__ */ (0,
|
|
9712
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
9422
9713
|
TextField,
|
|
9423
9714
|
__spreadProps(__spreadValues({}, register(name, { required })), {
|
|
9424
9715
|
placeholder,
|
|
@@ -9426,18 +9717,71 @@ var TextFormField = ({
|
|
|
9426
9717
|
"aria-labelledby": `${name}-label`
|
|
9427
9718
|
})
|
|
9428
9719
|
),
|
|
9429
|
-
/* @__PURE__ */ (0,
|
|
9720
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ErrorFormMessage, { message: errorMsg })
|
|
9430
9721
|
] });
|
|
9431
9722
|
};
|
|
9432
9723
|
|
|
9433
9724
|
// src/components/FormFields/Form.tsx
|
|
9434
9725
|
var import_react_hook_form3 = require("react-hook-form");
|
|
9435
|
-
var
|
|
9726
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
9436
9727
|
var Form = (_a) => {
|
|
9437
9728
|
var _b = _a, { onSubmit, children } = _b, props = __objRest(_b, ["onSubmit", "children"]);
|
|
9438
9729
|
const methods = (0, import_react_hook_form3.useForm)(props);
|
|
9439
9730
|
const { handleSubmit } = methods;
|
|
9440
|
-
return /* @__PURE__ */ (0,
|
|
9731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: handleSubmit(onSubmit), children }) }));
|
|
9732
|
+
};
|
|
9733
|
+
|
|
9734
|
+
// src/components/FormFields/MultiSelectFormField.tsx
|
|
9735
|
+
var import_react_hook_form4 = require("react-hook-form");
|
|
9736
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
9737
|
+
var MultiSelectFormField = (_a) => {
|
|
9738
|
+
var _b = _a, {
|
|
9739
|
+
name,
|
|
9740
|
+
label,
|
|
9741
|
+
required
|
|
9742
|
+
} = _b, rest = __objRest(_b, [
|
|
9743
|
+
"name",
|
|
9744
|
+
"label",
|
|
9745
|
+
"required"
|
|
9746
|
+
]);
|
|
9747
|
+
var _a2;
|
|
9748
|
+
const {
|
|
9749
|
+
formState: { errors }
|
|
9750
|
+
} = (0, import_react_hook_form4.useFormContext)();
|
|
9751
|
+
const { field } = (0, import_react_hook_form4.useController)({
|
|
9752
|
+
name,
|
|
9753
|
+
rules: {
|
|
9754
|
+
required
|
|
9755
|
+
},
|
|
9756
|
+
defaultValue: []
|
|
9757
|
+
});
|
|
9758
|
+
const { value, onChange, ref, onBlur, disabled } = field;
|
|
9759
|
+
const haveError = !!errors[name];
|
|
9760
|
+
const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
|
|
9761
|
+
const handleChange = (v) => {
|
|
9762
|
+
onChange(v);
|
|
9763
|
+
};
|
|
9764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex2, { direction: "column", children: [
|
|
9765
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
9766
|
+
FormLabel,
|
|
9767
|
+
{
|
|
9768
|
+
name,
|
|
9769
|
+
label,
|
|
9770
|
+
required,
|
|
9771
|
+
haveError
|
|
9772
|
+
}
|
|
9773
|
+
),
|
|
9774
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
9775
|
+
MultiSelect,
|
|
9776
|
+
__spreadValues({
|
|
9777
|
+
value,
|
|
9778
|
+
onValueChange: handleChange,
|
|
9779
|
+
ref,
|
|
9780
|
+
color: haveError ? "error" : "default"
|
|
9781
|
+
}, rest)
|
|
9782
|
+
),
|
|
9783
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorFormMessage, { message: errorMsg })
|
|
9784
|
+
] });
|
|
9441
9785
|
};
|
|
9442
9786
|
// Annotate the CommonJS export names for ESM import in node:
|
|
9443
9787
|
0 && (module.exports = {
|
|
@@ -9467,6 +9811,7 @@ var Form = (_a) => {
|
|
|
9467
9811
|
CheckboxItem,
|
|
9468
9812
|
Container,
|
|
9469
9813
|
ContainerStyled,
|
|
9814
|
+
Drawer,
|
|
9470
9815
|
DropdownMenu,
|
|
9471
9816
|
DropdownMenuItem,
|
|
9472
9817
|
ErrorFormMessage,
|
|
@@ -9480,7 +9825,10 @@ var Form = (_a) => {
|
|
|
9480
9825
|
GridStyled,
|
|
9481
9826
|
Icon,
|
|
9482
9827
|
InputStyled,
|
|
9828
|
+
MenuDropdown,
|
|
9483
9829
|
Modal,
|
|
9830
|
+
MultiSelect,
|
|
9831
|
+
MultiSelectFormField,
|
|
9484
9832
|
RadioGroup,
|
|
9485
9833
|
RadioGroupStyled,
|
|
9486
9834
|
RadioItem,
|