@jars-labs/jars-components 1.1.5 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{index-B86lZX7M.js → index-C2t8gcjZ.js} +190 -134
- package/dist/index-C2t8gcjZ.js.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/{lottie-D2DV2M_-.js → lottie-DT7Di9_8.js} +2 -2
- package/dist/{lottie-D2DV2M_-.js.map → lottie-DT7Di9_8.js.map} +1 -1
- package/dist/types/Button/Button.d.ts +1 -1
- package/dist/types/Button/Button.d.ts.map +1 -1
- package/dist/types/Icons/CheckSquare.d.ts +9 -0
- package/dist/types/Icons/CheckSquare.d.ts.map +1 -0
- package/dist/types/Icons/Curriculum.d.ts +9 -0
- package/dist/types/Icons/Curriculum.d.ts.map +1 -0
- package/dist/types/Icons/Flash.d.ts +9 -0
- package/dist/types/Icons/Flash.d.ts.map +1 -0
- package/dist/types/Icons/HouseCheck.d.ts +6 -0
- package/dist/types/Icons/HouseCheck.d.ts.map +1 -0
- package/dist/types/Icons/IconTypes.d.ts +1 -0
- package/dist/types/Icons/IconTypes.d.ts.map +1 -1
- package/dist/types/Message/Message.d.ts +1 -1
- package/dist/types/Message/Message.d.ts.map +1 -1
- package/dist/types/ProgressStepper/ProgressStepper.d.ts +18 -0
- package/dist/types/ProgressStepper/ProgressStepper.d.ts.map +1 -0
- package/dist/types/SegmentedControl/SegmentedControl.d.ts +3 -1
- package/dist/types/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/types/Stepper/Stepper.d.ts +2 -0
- package/dist/types/Stepper/Stepper.d.ts.map +1 -1
- package/dist/types/index.d.ts +5 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/index-B86lZX7M.js.map +0 -1
|
@@ -59,7 +59,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
59
59
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
60
60
|
};
|
|
61
61
|
|
|
62
|
-
var styles$
|
|
62
|
+
var styles$s = {"accordion":"Accordion-module_accordion__Nl0Vb","item":"Accordion-module_item__85Qrt","item-neutral":"Accordion-module_item-neutral__c06SU","item-white":"Accordion-module_item-white__l-DtA","chevron":"Accordion-module_chevron__kqKKx","bottom-right":"Accordion-module_bottom-right__2C-t6","control":"Accordion-module_control__92uvC","content":"Accordion-module_content__LkKAo","label":"Accordion-module_label__VkyEF"};
|
|
63
63
|
|
|
64
64
|
var serverSideRenderSVG = function (_a, children) {
|
|
65
65
|
var width = _a.width, height = _a.height, viewBox = _a.viewBox, fill = _a.fill, rotate = _a.rotate;
|
|
@@ -131,30 +131,30 @@ var Accordion = function (_a) {
|
|
|
131
131
|
return child;
|
|
132
132
|
});
|
|
133
133
|
return (jsx(Accordion$1, { variant: "unstyled", chevron: jsx(Chevron, { rotate: 270, width: "24px", height: "24px" }), chevronSize: 24, classNames: {
|
|
134
|
-
root: styles$
|
|
135
|
-
chevron: "".concat(styles$
|
|
134
|
+
root: styles$s.accordion,
|
|
135
|
+
chevron: "".concat(styles$s.chevron, " ").concat(styles$s[customChevronPosition]),
|
|
136
136
|
}, multiple: true, children: childrenWithColor }));
|
|
137
137
|
};
|
|
138
138
|
Accordion.displayName = 'Accordion';
|
|
139
139
|
var AccordionItem = function (_a) {
|
|
140
140
|
var children = _a.children, value = _a.value, _b = _a.bgColor, bgColor = _b === undefined ? 'neutral' : _b, props = __rest(_a, ["children", "value", "bgColor"]);
|
|
141
141
|
return (jsx(AccordionItem$1, __assign({ classNames: {
|
|
142
|
-
item: "".concat(styles$
|
|
142
|
+
item: "".concat(styles$s.item, " ").concat(bgColor === 'white' ? styles$s['item-white'] : styles$s['item-neutral']),
|
|
143
143
|
}, value: value }, props, { children: children })));
|
|
144
144
|
};
|
|
145
145
|
AccordionItem.displayName = 'AccordionItem';
|
|
146
146
|
var AccordionControl = function (_a) {
|
|
147
147
|
var children = _a.children;
|
|
148
|
-
return (jsx(AccordionControl$1, { classNames: { label: styles$
|
|
148
|
+
return (jsx(AccordionControl$1, { classNames: { label: styles$s.label, control: styles$s.control }, children: children }));
|
|
149
149
|
};
|
|
150
150
|
AccordionControl.displayName = 'AccordionControl';
|
|
151
151
|
var AccordionPanel = function (_a) {
|
|
152
152
|
var children = _a.children;
|
|
153
|
-
return (jsx(AccordionPanel$1, { classNames: { content: styles$
|
|
153
|
+
return (jsx(AccordionPanel$1, { classNames: { content: styles$s.content }, children: children }));
|
|
154
154
|
};
|
|
155
155
|
AccordionPanel.displayName = 'AccordionPanel';
|
|
156
156
|
|
|
157
|
-
var styles$
|
|
157
|
+
var styles$r = {"root":"ActionIcon-module_root__orJKP"};
|
|
158
158
|
|
|
159
159
|
/**
|
|
160
160
|
* ActionIcon component to display an icon with a clickable action.
|
|
@@ -173,7 +173,7 @@ var styles$q = {"root":"ActionIcon-module_root__orJKP"};
|
|
|
173
173
|
var ActionIcon = forwardRef(function (_a, ref) {
|
|
174
174
|
var onClick = _a.onClick, _b = _a.radius, radius = _b === undefined ? 'xl' : _b, _c = _a.color, color = _c === undefined ? 'var(--color-neutral-200)' : _c, _d = _a.variant, variant = _d === undefined ? 'filled' : _d, _e = _a.size, size = _e === undefined ? 'md' : _e, _f = _a.disabled, disabled = _f === undefined ? false : _f, children = _a.children, rest = __rest(_a, ["onClick", "radius", "color", "variant", "size", "disabled", "children"]);
|
|
175
175
|
return (jsx(ActionIcon$1, __assign({ onClick: onClick && onClick, radius: radius, variant: variant, size: size, disabled: disabled, classNames: {
|
|
176
|
-
root: styles$
|
|
176
|
+
root: styles$r.root,
|
|
177
177
|
}, color: color, ref: ref }, rest, { children: jsx(Group, { children: children }) })));
|
|
178
178
|
});
|
|
179
179
|
ActionIcon.displayName = 'ActionIcon';
|
|
@@ -183,7 +183,7 @@ var Animation = function (_a) {
|
|
|
183
183
|
var refVector = useRef(null);
|
|
184
184
|
var _b = useState(null), lottie = _b[0], setLottie = _b[1];
|
|
185
185
|
useEffect(function () {
|
|
186
|
-
import('./lottie-
|
|
186
|
+
import('./lottie-DT7Di9_8.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
|
|
187
187
|
}, []);
|
|
188
188
|
useEffect(function () {
|
|
189
189
|
if (lottie && refVector.current) {
|
|
@@ -201,7 +201,7 @@ var Animation = function (_a) {
|
|
|
201
201
|
};
|
|
202
202
|
Animation.displayName = 'Animation';
|
|
203
203
|
|
|
204
|
-
var styles$
|
|
204
|
+
var styles$q = {"dropdown":"Dropdown-module_dropdown__Pf3Aj","option":"Dropdown-module_option__5-7L7"};
|
|
205
205
|
|
|
206
206
|
/**
|
|
207
207
|
*
|
|
@@ -241,7 +241,7 @@ var Dropdown = function (_a) {
|
|
|
241
241
|
store.selectOption(index);
|
|
242
242
|
onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(option);
|
|
243
243
|
closeOnSelect && store.closeDropdown();
|
|
244
|
-
}, className: styles$
|
|
244
|
+
}, className: styles$q.option, children: option }, index));
|
|
245
245
|
}
|
|
246
246
|
return option;
|
|
247
247
|
});
|
|
@@ -249,7 +249,7 @@ var Dropdown = function (_a) {
|
|
|
249
249
|
return (jsxs(Combobox, __assign({ store: store, onOptionSubmit: function (value) {
|
|
250
250
|
onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(value);
|
|
251
251
|
closeOnSelect && store.closeDropdown();
|
|
252
|
-
} }, rest, { children: [jsx(Combobox.Target, { children: jsx(Flex, { w: "100%", children: typeof children === 'function' ? children(store) : children }) }), jsxs(Combobox.Dropdown, { classNames: { dropdown: styles$
|
|
252
|
+
} }, rest, { children: [jsx(Combobox.Target, { children: jsx(Flex, { w: "100%", children: typeof children === 'function' ? children(store) : children }) }), jsxs(Combobox.Dropdown, { classNames: { dropdown: styles$q.dropdown }, children: [jsx(Combobox.Options, { mah: maxHeight, style: { overflow: maxHeight ? 'auto' : 'unset' }, children: renderOptions(options, onOptionSubmit) }), footer && (jsx(Combobox.Footer, { children: typeof footer === 'function' ? footer(store) : footer }))] })] })));
|
|
253
253
|
};
|
|
254
254
|
Dropdown.displayName = 'Dropdown';
|
|
255
255
|
Dropdown.Option = Combobox.Option;
|
|
@@ -358,11 +358,11 @@ function requireClassnames () {
|
|
|
358
358
|
var classnamesExports = requireClassnames();
|
|
359
359
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
360
360
|
|
|
361
|
-
var styles$
|
|
361
|
+
var styles$p = {"container":"Input-module_container__zzWGm","input":"Input-module_input__aRXjR","inputError":"Input-module_inputError__s3cRz","inputLeftIcon":"Input-module_inputLeftIcon__gObSe","inputRightIcon":"Input-module_inputRightIcon__hWB1a","label":"Input-module_label__HtZ2L","labelFocused":"Input-module_labelFocused__3-p5R","labelError":"Input-module_labelError__MA8Ti","labelDisabled":"Input-module_labelDisabled__lhjNw","description":"Input-module_description__Q1Rbw","error":"Input-module_error__yiAgw","errorVisible":"Input-module_errorVisible__IS7J2","errorHidden":"Input-module_errorHidden__8-hAw","errorText":"Input-module_errorText__wKZ67","leftSection":"Input-module_leftSection__YyGeo","rightSection":"Input-module_rightSection__zMH-z"};
|
|
362
362
|
|
|
363
363
|
var inputWrapperSlotElement = { component: 'div' };
|
|
364
|
-
var inputDescriptionProps = __assign({ className: styles$
|
|
365
|
-
var inputErrorProps = __assign({ className: styles$
|
|
364
|
+
var inputDescriptionProps = __assign({ className: styles$p.description }, inputWrapperSlotElement);
|
|
365
|
+
var inputErrorProps = __assign({ className: styles$p.error }, inputWrapperSlotElement);
|
|
366
366
|
|
|
367
367
|
var Info = function (_a) {
|
|
368
368
|
var width = _a.width, height = _a.height, viewBox = _a.viewBox, _b = _a.stroke, stroke = _b === undefined ? 'currentColor' : _b, _c = _a.strokeWidth, strokeWidth = _c === undefined ? 1.5 : _c;
|
|
@@ -370,7 +370,7 @@ var Info = function (_a) {
|
|
|
370
370
|
};
|
|
371
371
|
Info.displayName = 'Info';
|
|
372
372
|
|
|
373
|
-
var styles$
|
|
373
|
+
var styles$o = {"text":"Text-module_text__3xRq3","h1":"Text-module_h1__RkLfx","h2":"Text-module_h2__fAm7L","h3":"Text-module_h3__o11c2","h4":"Text-module_h4__RIwZg","m":"Text-module_m__nlfmp","s":"Text-module_s__t9q3d","xs":"Text-module_xs__ZU2jV","xxs":"Text-module_xxs__hmZHQ","bold":"Text-module_bold__N75tZ","medium":"Text-module_medium__Q8kf4","regular":"Text-module_regular__-EdPk"};
|
|
374
374
|
|
|
375
375
|
var elementType = {
|
|
376
376
|
h1: 'h1',
|
|
@@ -381,7 +381,7 @@ var elementType = {
|
|
|
381
381
|
var Text = React.forwardRef(function (props, ref) {
|
|
382
382
|
var as = props.as, children = props.children, className = props.className, color = props.color, style = props.style, variant = props.variant, weight = props.weight, rest = __rest(props, ["as", "children", "className", "color", "style", "variant", "weight"]);
|
|
383
383
|
var combinedStyle = __assign(__assign({}, style), { color: color });
|
|
384
|
-
var combinedClassName = classNames(className, styles$
|
|
384
|
+
var combinedClassName = classNames(className, styles$o['text'], styles$o[variant || ''], styles$o[weight || '']);
|
|
385
385
|
return React.createElement(as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
|
|
386
386
|
});
|
|
387
387
|
Text.displayName = 'Text';
|
|
@@ -451,19 +451,19 @@ var Input = function (_a) {
|
|
|
451
451
|
var showLabel = !hideLabel && (isFocused || value.trim());
|
|
452
452
|
var placeHolderValue = placeholder && isFocused ? placeholder : (label !== null && label !== undefined ? label : placeholder);
|
|
453
453
|
var ErrorSection = useMemo(function () {
|
|
454
|
-
return holdSpace && (jsxs(Flex, { className: classNames(styles$
|
|
454
|
+
return holdSpace && (jsxs(Flex, { className: classNames(styles$p.error, error ? styles$p.errorVisible : styles$p.errorHidden), gap: 4, ml: 0, style: { alignItems: 'flex-start' }, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$p.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
|
|
455
455
|
}, [error]);
|
|
456
|
-
return (jsxs("div", { className: styles$
|
|
457
|
-
_b[styles$
|
|
458
|
-
_b[styles$
|
|
459
|
-
_b[styles$
|
|
456
|
+
return (jsxs("div", { className: styles$p.container, children: [showLabel && (jsx("label", { className: classNames(styles$p.label, (_b = {},
|
|
457
|
+
_b[styles$p.labelError] = error && !isFocused,
|
|
458
|
+
_b[styles$p.labelFocused] = isFocused || isHovered,
|
|
459
|
+
_b[styles$p.labelDisabled] = disabled,
|
|
460
460
|
_b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(TextInput, __assign({ classNames: {
|
|
461
|
-
input: classNames(styles$
|
|
462
|
-
_c[styles$
|
|
463
|
-
_c[styles$
|
|
464
|
-
_c[styles$
|
|
461
|
+
input: classNames(styles$p.input, (_c = {},
|
|
462
|
+
_c[styles$p.inputLeftIcon] = leftSection,
|
|
463
|
+
_c[styles$p.inputRightIcon] = rightSection,
|
|
464
|
+
_c[styles$p.inputError] = error,
|
|
465
465
|
_c)),
|
|
466
|
-
}, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: inputDescriptionProps, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$
|
|
466
|
+
}, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: inputDescriptionProps, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, leftSection: leftSection, rightSection: rightSection, leftSectionProps: { className: styles$p.leftSection }, rightSectionProps: { className: styles$p.rightSection }, type: type, disabled: disabled }, rest)) })] }));
|
|
467
467
|
};
|
|
468
468
|
Input.displayName = 'Input';
|
|
469
469
|
|
|
@@ -556,7 +556,7 @@ var Autocomplete = function (_a) {
|
|
|
556
556
|
};
|
|
557
557
|
Autocomplete.displayName = 'Autocomplete';
|
|
558
558
|
|
|
559
|
-
var styles$
|
|
559
|
+
var styles$n = {"avatar":"Avatar-module_avatar__QJpdG","placeholder":"Avatar-module_placeholder__9AtPN"};
|
|
560
560
|
|
|
561
561
|
var AvatarPlaceholder = function (_a) {
|
|
562
562
|
var width = _a.width, height = _a.height, _b = _a.viewBox, viewBox = _b === undefined ? '0 0 24 24' : _b, rotate = _a.rotate, rest = __rest(_a, ["width", "height", "viewBox", "rotate"]);
|
|
@@ -584,8 +584,8 @@ var Avatar = function (_a) {
|
|
|
584
584
|
minHeight: sizeMapping[size],
|
|
585
585
|
},
|
|
586
586
|
}, classNames: {
|
|
587
|
-
root: styles$
|
|
588
|
-
placeholder: styles$
|
|
587
|
+
root: styles$n.avatar,
|
|
588
|
+
placeholder: styles$n.placeholder,
|
|
589
589
|
} }, rest, { children: jsx(AvatarPlaceholder, { role: "img", "aria-label": alt, "data-testid": testId ? "".concat(testId, "-placeholder") : undefined, width: placeholderSizeMapping[size], height: placeholderSizeMapping[size] }) })));
|
|
590
590
|
};
|
|
591
591
|
Avatar.displayName = 'Avatar';
|
|
@@ -656,19 +656,19 @@ var Badge = forwardRef(function (_a, ref) {
|
|
|
656
656
|
});
|
|
657
657
|
Badge.displayName = 'Badge';
|
|
658
658
|
|
|
659
|
-
var styles$
|
|
659
|
+
var styles$m = {"button":"Button-module_button__7BLGt","label":"Button-module_label__447Ll","button-flex":"Button-module_button-flex__bzVRB","button--filled":"Button-module_button--filled__BKGu2","label-color--filled":"Button-module_label-color--filled__wJHlw","label-color--filled--disabled":"Button-module_label-color--filled--disabled__BbMbV","button--secondary":"Button-module_button--secondary__GKHCb","button--outlined":"Button-module_button--outlined__QZysw","label-color--outlined":"Button-module_label-color--outlined__seGi5","label-color--outlined--disabled":"Button-module_label-color--outlined--disabled__qXPjI","button--outlined-error":"Button-module_button--outlined-error__xR07R","label-color--outlined-error":"Button-module_label-color--outlined-error__-2cf9","label-color--outlined-error--disabled":"Button-module_label-color--outlined-error--disabled__LZB7z","button--underlined":"Button-module_button--underlined__BsY5s","label-color--underlined":"Button-module_label-color--underlined__ymMfq","label-color--underlined--disabled":"Button-module_label-color--underlined--disabled__TBDd8","button--underlined-neutral":"Button-module_button--underlined-neutral__30A91","label-color--underlined-neutral":"Button-module_label-color--underlined-neutral__1xWMY","label-color--underlined-neutral--disabled":"Button-module_label-color--underlined-neutral--disabled__RQKW7","button--delete":"Button-module_button--delete__Xqpbl","label-color--delete":"Button-module_label-color--delete__iPB3X","label-color--delete--disabled":"Button-module_label-color--delete--disabled__lJkM6","button--small":"Button-module_button--small__3npYU","button--medium":"Button-module_button--medium__WRSIQ","button--large":"Button-module_button--large__bGVS1"};
|
|
660
660
|
|
|
661
661
|
var Button = forwardRef(function (_a, ref) {
|
|
662
662
|
var _b;
|
|
663
663
|
var _c = _a.variant, variant = _c === undefined ? 'filled' : _c, submit = _a.submit, _d = _a.size, size = _d === undefined ? 'medium' : _d, fullWidth = _a.fullWidth, backgroundColor = _a.backgroundColor, label = _a.label, icon = _a.icon, children = _a.children, props = __rest(_a, ["variant", "submit", "size", "fullWidth", "backgroundColor", "label", "icon", "children"]);
|
|
664
|
-
var mode = styles$
|
|
665
|
-
return (jsx("button", __assign({ ref: ref, type: submit ? 'submit' : 'button', style: __assign(__assign({}, props.style), { backgroundColor: backgroundColor, width: fullWidth ? '100%' : 'auto' }) }, props, { className: [styles$
|
|
666
|
-
_b[styles$
|
|
664
|
+
var mode = styles$m["button--".concat(variant)];
|
|
665
|
+
return (jsx("button", __assign({ ref: ref, type: submit ? 'submit' : 'button', style: __assign(__assign({}, props.style), { backgroundColor: backgroundColor, width: fullWidth ? '100%' : 'auto' }) }, props, { className: [styles$m.button, styles$m["button--".concat(size)], mode].join(' '), children: jsxs("div", { className: styles$m['button-flex'], children: [!!icon && icon, label ? (jsx(Text, { className: classNames(styles$m.label, styles$m["label-color--".concat(variant)], (_b = {},
|
|
666
|
+
_b[styles$m["label-color--".concat(variant, "--disabled")]] = props.disabled,
|
|
667
667
|
_b)), children: label })) : (children)] }) })));
|
|
668
668
|
});
|
|
669
669
|
Button.displayName = 'Button';
|
|
670
670
|
|
|
671
|
-
var styles$
|
|
671
|
+
var styles$l = {"card":"Card-module_card__-PlHa","footerDivider":"Card-module_footerDivider__nt5J7","mdShadow":"Card-module_mdShadow__yft6m","lgShadow":"Card-module_lgShadow__WzWj7","variantDefault":"Card-module_variantDefault__AIy3D","variantPlain":"Card-module_variantPlain__MOaH5","variantNeutral":"Card-module_variantNeutral__OAsYA","variantSuccess":"Card-module_variantSuccess__GWiOd","variantWarning":"Card-module_variantWarning__jappm","variantNotice":"Card-module_variantNotice__C7UUh","variantInfo":"Card-module_variantInfo__B26E9","variantPrimary":"Card-module_variantPrimary__9E-0B","variantCaution":"Card-module_variantCaution__-p-t8","paddingMd":"Card-module_paddingMd__i1uBq","paddingXs":"Card-module_paddingXs__9BSaQ","paddingCustom":"Card-module_paddingCustom__km95M","appearanceFilled":"Card-module_appearanceFilled__r6-rn","appearanceOutline":"Card-module_appearanceOutline__tseCa","borderWidthDefault":"Card-module_borderWidthDefault__QblrJ","borderWidthMd":"Card-module_borderWidthMd__lCL3w"};
|
|
672
672
|
|
|
673
673
|
var capitalize = function (value) {
|
|
674
674
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
@@ -676,15 +676,15 @@ var capitalize = function (value) {
|
|
|
676
676
|
var Card = function (_a) {
|
|
677
677
|
var _b;
|
|
678
678
|
var header = _a.header, children = _a.children, footer = _a.footer, style = _a.style, _c = _a.shadow, shadow = _c === undefined ? 'md' : _c, _d = _a.variant, variant = _d === undefined ? 'default' : _d, _e = _a.appearance, appearance = _e === undefined ? 'filled' : _e, _f = _a.padding, padding = _f === undefined ? 'md' : _f, _g = _a.borderWidth, borderWidth = _g === undefined ? 'default' : _g;
|
|
679
|
-
var cardClassName = classNames(styles$
|
|
680
|
-
_b[styles$
|
|
681
|
-
_b[styles$
|
|
682
|
-
_b), styles$
|
|
683
|
-
return (jsxs("div", { className: cardClassName, style: style, children: [header, children, footer && jsx("div", { className: styles$
|
|
679
|
+
var cardClassName = classNames(styles$l.card, (_b = {},
|
|
680
|
+
_b[styles$l.mdShadow] = shadow === 'md',
|
|
681
|
+
_b[styles$l.lgShadow] = shadow === 'lg',
|
|
682
|
+
_b), styles$l["variant".concat(capitalize(variant))], styles$l["appearance".concat(capitalize(appearance))], styles$l["padding".concat(capitalize(padding))], styles$l["borderWidth".concat(capitalize(borderWidth))]);
|
|
683
|
+
return (jsxs("div", { className: cardClassName, style: style, children: [header, children, footer && jsx("div", { className: styles$l.footerDivider }), footer] }));
|
|
684
684
|
};
|
|
685
685
|
Card.displayName = 'Card';
|
|
686
686
|
|
|
687
|
-
var styles$
|
|
687
|
+
var styles$k = {"cardStatus":"CardStatus-module_cardStatus__5T4aF","cardStatus--leftIcon":"CardStatus-module_cardStatus--leftIcon__ULp9A"};
|
|
688
688
|
|
|
689
689
|
var cardStatusVariantMap = {
|
|
690
690
|
notes: {
|
|
@@ -721,11 +721,11 @@ var CardStatus = function (_a) {
|
|
|
721
721
|
? (_b = cardStatusVariantMap[variant]) === null || _b === undefined ? undefined : _b.backgroundColor
|
|
722
722
|
: undefined;
|
|
723
723
|
var sizeStyles = sizeMap[size || 'small'];
|
|
724
|
-
return (jsxs("div", { className: "".concat(styles$
|
|
724
|
+
return (jsxs("div", { className: "".concat(styles$k.cardStatus, " ").concat(leftIcon ? styles$k['cardStatus--leftIcon'] : ''), style: backgroundColor ? { backgroundColor: backgroundColor } : undefined, children: [leftIcon && icon, jsx(Text, { variant: sizeStyles.textVariant, color: 'var(--color-neutral-600)', children: label }), !leftIcon && icon] }));
|
|
725
725
|
};
|
|
726
726
|
CardStatus.displayName = 'CardStatus';
|
|
727
727
|
|
|
728
|
-
var styles$
|
|
728
|
+
var styles$j = {"inner":"Checkbox-module_inner__R7olC","input":"Checkbox-module_input__XnCmS","label":"Checkbox-module_label__l8z5T","label-disabled":"Checkbox-module_label-disabled__fXIgW","icon-disabled":"Checkbox-module_icon-disabled__Nw0dG"};
|
|
729
729
|
|
|
730
730
|
/**
|
|
731
731
|
* Checkbox component for selecting multiple options from a set.
|
|
@@ -743,20 +743,20 @@ var Checkbox = function (_a) {
|
|
|
743
743
|
var _b, _c;
|
|
744
744
|
var _d = _a.checked, checked = _d === undefined ? false : _d, _e = _a.disabled, disabled = _e === undefined ? false : _e, label = _a.label, onChange = _a.onChange, id = _a.id, rest = __rest(_a, ["checked", "disabled", "label", "onChange", "id"]);
|
|
745
745
|
return (jsx(Checkbox$1, __assign({ checked: checked, label: label, disabled: disabled, onChange: onChange, id: id, color: "var(--color-primary-300)", classNames: {
|
|
746
|
-
labelWrapper: styles$
|
|
747
|
-
label: classNames(styles$
|
|
748
|
-
_b[styles$
|
|
746
|
+
labelWrapper: styles$j.labelWrapper,
|
|
747
|
+
label: classNames(styles$j.label, (_b = {},
|
|
748
|
+
_b[styles$j['label-disabled']] = disabled,
|
|
749
749
|
_b)),
|
|
750
|
-
input: styles$
|
|
751
|
-
inner: styles$
|
|
750
|
+
input: styles$j.input,
|
|
751
|
+
inner: styles$j.inner,
|
|
752
752
|
icon: classNames((_c = {},
|
|
753
|
-
_c[styles$
|
|
753
|
+
_c[styles$j['icon-disabled']] = disabled,
|
|
754
754
|
_c)),
|
|
755
755
|
} }, rest)));
|
|
756
756
|
};
|
|
757
757
|
Checkbox.displayName = 'Checkbox';
|
|
758
758
|
|
|
759
|
-
var styles$
|
|
759
|
+
var styles$i = {"chip-wrapper":"Chip-module_chip-wrapper__XcAWQ","chip-wrapper-text":"Chip-module_chip-wrapper-text__MGQ2X","chip-wrapper-menu-text":"Chip-module_chip-wrapper-menu-text__6-ZGF","chip-number":"Chip-module_chip-number__Y2-Tg","chip-number-wide":"Chip-module_chip-number-wide__qIVlX","chip-menu-dropdown":"Chip-module_chip-menu-dropdown__36ced","chip-menu-item":"Chip-module_chip-menu-item__-u2K-","chip-wrapper-filter":"Chip-module_chip-wrapper-filter__0GhdM"};
|
|
760
760
|
|
|
761
761
|
var ChevronCollapse = function (_a) {
|
|
762
762
|
var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === undefined ? 'currentColor' : _e, _f = _a.fill, fill = _f === undefined ? 'none' : _f;
|
|
@@ -780,10 +780,10 @@ var Chip = function (_a) {
|
|
|
780
780
|
return null;
|
|
781
781
|
// Just one filter
|
|
782
782
|
if (itemGroup.length === 1) {
|
|
783
|
-
return (jsxs(Flex, { className: styles$
|
|
783
|
+
return (jsxs(Flex, { className: styles$i['chip-wrapper'], children: [jsx(Text, { variant: "xs", weight: "regular", className: styles$i['chip-wrapper-text'], children: itemGroup[0] }), jsx(ActionIcon, { variant: "light", size: "xs", onClick: function () { return handleDelete(itemGroup[0]); }, children: jsx(Close, { width: "18px", height: "18px" }) })] }));
|
|
784
784
|
}
|
|
785
785
|
// More than one filter
|
|
786
|
-
return (jsxs(Menu$1, { opened: opened, onChange: setOpened, withinPortal: true, position: "bottom-start", closeOnItemClick: false, children: [jsx(Menu$1.Target, { children: jsxs(Flex, { className: styles$
|
|
786
|
+
return (jsxs(Menu$1, { opened: opened, onChange: setOpened, withinPortal: true, position: "bottom-start", closeOnItemClick: false, children: [jsx(Menu$1.Target, { children: jsxs(Flex, { className: styles$i['chip-wrapper'], children: [jsxs(Flex, { className: styles$i['chip-wrapper-menu-text'], children: [jsx(Text, { variant: "xs", weight: "regular", children: item }), jsx(Flex, { className: "".concat(styles$i['chip-number'], " ").concat(itemGroup.length > 9 ? styles$i['chip-number-wide'] : ''), children: jsx(Text, { variant: "xxs", weight: "bold", color: "var(--color-white)", style: { lineHeight: 1 }, children: itemGroup.length }) })] }), jsx(ActionIcon, { variant: "light", size: "xs", onClick: function () { return setOpened(function (o) { return !o; }); }, children: jsx(ChevronCollapse, { width: "24px", height: "24px" }) })] }) }), jsx(Menu$1.Dropdown, { className: styles$i['chip-menu-dropdown'], children: itemGroup.map(function (f) { return (jsx(Menu$1.Item, { className: styles$i['chip-menu-item'], children: jsx(Checkbox, { label: jsxs(Flex, { className: styles$i['chip-wrapper-filter'], children: [jsx(Text, { variant: "xs", weight: "regular", children: f }), jsxs(Text, { variant: "xs", weight: "regular", children: ["(", f.length, ")"] })] }), checked: itemGroup.includes(f), onChange: function () { return handleDelete(f); } }) }, f)); }) })] }));
|
|
787
787
|
};
|
|
788
788
|
Chip.displayName = 'Chip';
|
|
789
789
|
|
|
@@ -874,10 +874,10 @@ var DateInput = function (_a) {
|
|
|
874
874
|
var showLabel = !hideLabel && (isFocused || value);
|
|
875
875
|
var placeHolderValue = placeholder && isFocused ? placeholder : (label !== null && label !== undefined ? label : placeholder);
|
|
876
876
|
var ErrorSection = useMemo(function () {
|
|
877
|
-
return holdSpace && (jsxs(Flex, { className: styles$
|
|
877
|
+
return holdSpace && (jsxs(Flex, { className: styles$p.error, gap: 4, ml: 16, style: {
|
|
878
878
|
visibility: error ? 'visible' : 'hidden',
|
|
879
879
|
alignItems: 'flex-start',
|
|
880
|
-
}, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$
|
|
880
|
+
}, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$p.errorText), children: capitalizeFirstSentenceLetter(error || '') })] }));
|
|
881
881
|
}, [error, holdSpace]);
|
|
882
882
|
var handleBlur = function (e) {
|
|
883
883
|
setIsFocused(false);
|
|
@@ -885,36 +885,36 @@ var DateInput = function (_a) {
|
|
|
885
885
|
onBlur(e);
|
|
886
886
|
}
|
|
887
887
|
};
|
|
888
|
-
return (jsxs("div", { className: styles$
|
|
889
|
-
_b[styles$
|
|
890
|
-
_b[styles$
|
|
891
|
-
_b[styles$
|
|
888
|
+
return (jsxs("div", { className: styles$p.container, children: [showLabel && (jsx("label", { className: classNames(styles$p.label, (_b = {},
|
|
889
|
+
_b[styles$p.labelError] = error && !isFocused,
|
|
890
|
+
_b[styles$p.labelFocused] = isFocused || isHovered,
|
|
891
|
+
_b[styles$p.labelDisabled] = disabled,
|
|
892
892
|
_b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(DateInput$1, __assign({ name: name, classNames: {
|
|
893
|
-
input: classNames(styles$
|
|
894
|
-
_c[styles$
|
|
895
|
-
_c[styles$
|
|
893
|
+
input: classNames(styles$p.input, (_c = {},
|
|
894
|
+
_c[styles$p.inputError] = error,
|
|
895
|
+
_c[styles$p.inputRightIcon] = true,
|
|
896
896
|
_c)),
|
|
897
|
-
}, valueFormat: "MM/DD/YYYY", dateParser: dateParser, rightSection: jsx(Calendar, { stroke: "var(--color-neutral-600)", width: "18px", height: "18px", viewBox: "0 0 24 24" }), rightSectionProps: { className: styles$
|
|
897
|
+
}, valueFormat: "MM/DD/YYYY", dateParser: dateParser, rightSection: jsx(Calendar, { stroke: "var(--color-neutral-600)", width: "18px", height: "18px", viewBox: "0 0 24 24" }), rightSectionProps: { className: styles$p.rightSection }, placeholder: placeHolderValue, value: value, onChange: onChange, onBlur: handleBlur, error: ErrorSection, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'error'], disabled: disabled }, rest)) })] }));
|
|
898
898
|
};
|
|
899
899
|
DateInput.displayName = 'DateInput';
|
|
900
900
|
|
|
901
|
-
var styles$
|
|
901
|
+
var styles$h = {"code-input":"EnterCodeInput-module_code-input__bCj-T","code-input--2":"EnterCodeInput-module_code-input--2__yoYWJ","code-input--3":"EnterCodeInput-module_code-input--3__0xXFa","code-input--4":"EnterCodeInput-module_code-input--4__stWlP","code-input-error":"EnterCodeInput-module_code-input-error__l8yKQ"};
|
|
902
902
|
|
|
903
903
|
var EnterCodeInput = React.forwardRef(function (props, ref) {
|
|
904
904
|
var className = [
|
|
905
|
-
styles$
|
|
906
|
-
styles$
|
|
905
|
+
styles$h['code-input'],
|
|
906
|
+
styles$h["code-input--".concat(props.inline)],
|
|
907
907
|
].join(' ');
|
|
908
908
|
if (props.error) {
|
|
909
|
-
className = [className, styles$
|
|
909
|
+
className = [className, styles$h['code-input-error']].join(' ');
|
|
910
910
|
}
|
|
911
911
|
return (jsx("input", __assign({}, (typeof props.field === 'object' ? props.field : {}), props, { ref: ref, name: props.name, autoFocus: true, className: className, type: props.type, maxLength: 6, placeholder: props.placeholder, onChange: props.onChange, onBlur: props.onBlur, onKeyUp: props.onKeyUp, value: props.value })));
|
|
912
912
|
});
|
|
913
913
|
EnterCodeInput.displayName = 'EnterCodeInput';
|
|
914
914
|
|
|
915
|
-
var styles$
|
|
915
|
+
var styles$g = {"container":"FileInput-module_container__PUDhK","dropzone":"FileInput-module_dropzone__y5BNo","dragging":"FileInput-module_dragging__DoJPz","disabled":"FileInput-module_disabled__2Vlih","input":"FileInput-module_input__xiCkj","icon":"FileInput-module_icon__lXNr-","content":"FileInput-module_content__V9dYE","label":"FileInput-module_label__3DYWx","helper":"FileInput-module_helper__vVlYi","fileFormatText":"FileInput-module_fileFormatText__3E24H","fileList":"FileInput-module_fileList__xwhfk"};
|
|
916
916
|
|
|
917
|
-
var styles$
|
|
917
|
+
var styles$f = {"fileItem":"FileUpload-module_fileItem__TQAj3","fileInfo":"FileUpload-module_fileInfo__0Rsbg","successIcon":"FileUpload-module_successIcon__P4ekl","errorIcon":"FileUpload-module_errorIcon__3IUcP","fileName":"FileUpload-module_fileName__iE6N7","fileSize":"FileUpload-module_fileSize__BuAI5","fileMessage":"FileUpload-module_fileMessage__ymYSV","progressBar":"FileUpload-module_progressBar__MYqP0","progress":"FileUpload-module_progress__eXpUX"};
|
|
918
918
|
|
|
919
919
|
var Clock = function (_a) {
|
|
920
920
|
var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === undefined ? 'currentColor' : _e;
|
|
@@ -970,25 +970,25 @@ var getMessage = function (status, message, progress) {
|
|
|
970
970
|
if (status === 'failed') {
|
|
971
971
|
if (message === null || message === undefined ? undefined : message.includes('-')) {
|
|
972
972
|
var _a = message.split('-'), errorReason = _a[0], errorMessage = _a[1];
|
|
973
|
-
return (jsxs(Text, { className: styles$
|
|
973
|
+
return (jsxs(Text, { className: styles$f.fileMessage, color: "var(--color-red-400)", children: [jsx("strong", { children: errorReason }), " - ", errorMessage] }));
|
|
974
974
|
}
|
|
975
|
-
return (jsx(Text, { className: styles$
|
|
975
|
+
return (jsx(Text, { className: styles$f.fileMessage, color: "var(--color-red-400)", children: message }));
|
|
976
976
|
}
|
|
977
977
|
if (status === 'duplicate') {
|
|
978
978
|
if (message === null || message === undefined ? undefined : message.includes('-')) {
|
|
979
979
|
var _b = message.split('-'), errorReason = _b[0], errorMessage = _b[1];
|
|
980
|
-
return (jsxs(Text, { className: styles$
|
|
980
|
+
return (jsxs(Text, { className: styles$f.fileMessage, color: "var(--color-orange-400)", children: [jsx("strong", { children: errorReason }), " - ", errorMessage] }));
|
|
981
981
|
}
|
|
982
|
-
return (jsx(Text, { className: styles$
|
|
982
|
+
return (jsx(Text, { className: styles$f.fileMessage, color: "var(--color-orange-400)", children: message }));
|
|
983
983
|
}
|
|
984
984
|
if (status === 'uploading') {
|
|
985
|
-
return (jsxs(Flex, { align: "center", gap: 24, children: [jsx(Flex, { className: styles$
|
|
985
|
+
return (jsxs(Flex, { align: "center", gap: 24, children: [jsx(Flex, { className: styles$f.progressBar, children: jsx(Flex, { className: styles$f.progress, w: "".concat(progress, "%") }) }), jsxs(Text, { color: "var(--color-neutral-500)", variant: "m", style: { margin: 0 }, children: [progress, "%"] })] }));
|
|
986
986
|
}
|
|
987
987
|
if (status === 'previously-uploaded') {
|
|
988
|
-
return (jsx(Text, { className: styles$
|
|
988
|
+
return (jsx(Text, { className: styles$f.fileMessage, color: "var(--color-green-400)", children: message }));
|
|
989
989
|
}
|
|
990
990
|
if (status === 'uploaded') {
|
|
991
|
-
return (jsx(Text, { className: styles$
|
|
991
|
+
return (jsx(Text, { className: styles$f.fileMessage, color: "var(--color-green-400)", children: message }));
|
|
992
992
|
}
|
|
993
993
|
return null;
|
|
994
994
|
};
|
|
@@ -1004,7 +1004,7 @@ var parseFileSize = function (size) {
|
|
|
1004
1004
|
|
|
1005
1005
|
var FileUpload = function (_a) {
|
|
1006
1006
|
var id = _a.id, name = _a.name, size = _a.size, status = _a.status, message = _a.message, progress = _a.progress, removeFile = _a.removeFile;
|
|
1007
|
-
return (jsxs(Fragment, { children: [jsx(Divider, { color: "var(--color-neutral-300)" }), jsxs("div", { className: styles$
|
|
1007
|
+
return (jsxs(Fragment, { children: [jsx(Divider, { color: "var(--color-neutral-300)" }), jsxs("div", { className: styles$f.fileItem, children: [jsxs("div", { className: styles$f.fileInfo, children: [getIcon$1(status), jsxs(Flex, { direction: "column", w: "100%", children: [jsx(Text, { className: styles$f.fileName, children: name }), jsx(Text, { className: styles$f.fileSize, color: "var(--color-neutral-500)", children: parseFileSize(size) }), getMessage(status, message, progress)] })] }), removeFile && (jsx(ActionIcon, { variant: "light", size: 'md', onClick: function () { return removeFile(id); }, "aria-label": "Remove ".concat(name), children: jsx(Close, {}) }))] }, "".concat(name, "-").concat(id))] }));
|
|
1008
1008
|
};
|
|
1009
1009
|
FileUpload.displayName = 'FileUpload';
|
|
1010
1010
|
|
|
@@ -1062,34 +1062,34 @@ var FileInput = function (_a) {
|
|
|
1062
1062
|
.join(', ')
|
|
1063
1063
|
.slice('.'.length)
|
|
1064
1064
|
.toUpperCase(), ". Max file size: ").concat(maxSize, "MB");
|
|
1065
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1066
|
-
_b[styles$
|
|
1067
|
-
_b[styles$
|
|
1068
|
-
_b)), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx("input", { type: "file", accept: acceptedFormats.join(','), onChange: handleFileInput, className: styles$
|
|
1065
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$g.container, children: jsxs("div", { className: classNames(styles$g.dropzone, (_b = {},
|
|
1066
|
+
_b[styles$g.dragging] = isDragging,
|
|
1067
|
+
_b[styles$g.disabled] = disabled,
|
|
1068
|
+
_b)), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx("input", { type: "file", accept: acceptedFormats.join(','), onChange: handleFileInput, className: styles$g.input, "aria-label": label, disabled: disabled, multiple: true }), jsx("div", { className: styles$g.icon, children: jsx(Upload, { stroke: color, width: "2.6rem", height: "2.6rem", viewBox: "0 0 40 40" }) }), jsxs("div", { className: styles$g.content, children: [jsxs(Flex, { gap: 4, children: [jsx(Text, { variant: "m", weight: "medium", color: color, children: "Drag or" }), jsxs(Text, { variant: "m", weight: "medium", color: color, style: { textDecoration: 'underline' }, children: ["click to upload ", label] })] }), jsx(Text, { className: styles$g.fileFormatText, color: color, children: fileFormatText })] })] }) }), files.some(function (f) { return f.status === 'failed'; }) ? (jsx(Text, { variant: "xs", className: styles$g.helper, children: errorMessage })) : (jsx(Text, { variant: "xs", className: styles$g.helper, children: helperText })), files.length > 0 && (jsx(Flex, { className: styles$g.fileList, children: files.map(function (_a, index) {
|
|
1069
1069
|
var file = _a.file, rest = __rest(_a, ["file"]);
|
|
1070
1070
|
return (jsx(FileUpload, __assign({ file: file, removeFile: removeFile }, rest), "".concat(file.name, "-").concat(index)));
|
|
1071
1071
|
}) }))] }));
|
|
1072
1072
|
};
|
|
1073
1073
|
FileInput.displayName = 'FileInput';
|
|
1074
1074
|
|
|
1075
|
-
var styles$
|
|
1075
|
+
var styles$e = {"flex":"IncrementNumber-module_flex__Zo8-v","increment-button":"IncrementNumber-module_increment-button__qpw2X"};
|
|
1076
1076
|
|
|
1077
1077
|
var IncrementNumber = function (props) {
|
|
1078
1078
|
var formatter = new Intl.NumberFormat('en-US', {
|
|
1079
1079
|
style: 'currency',
|
|
1080
1080
|
currency: 'USD',
|
|
1081
1081
|
});
|
|
1082
|
-
return (jsxs("div", { className: styles$
|
|
1082
|
+
return (jsxs("div", { className: styles$e['flex'], children: [props.disableDecrease ? (jsx("div", { style: { width: 24 } })) : (jsx("button", { className: styles$e['increment-button'], onClick: function () { return props.handleDecrease(props.value); }, children: jsx("img", { src: props.minusIconPath, width: 24, height: 24, alt: "-", style: {
|
|
1083
1083
|
maxWidth: '100%',
|
|
1084
1084
|
height: 'auto',
|
|
1085
|
-
} }) })), jsx(Text, { variant: "m", weight: "regular", style: { minWidth: 120 }, children: formatter.format(props.value) }), props.disableIncrease ? (jsx("div", { style: { width: 24 } })) : (jsx("button", { className: styles$
|
|
1085
|
+
} }) })), jsx(Text, { variant: "m", weight: "regular", style: { minWidth: 120 }, children: formatter.format(props.value) }), props.disableIncrease ? (jsx("div", { style: { width: 24 } })) : (jsx("button", { className: styles$e['increment-button'], onClick: function () { return props.handleIncrease(props.value); }, children: jsx("img", { src: props.plusIconPath, width: 24, height: 24, alt: "+", style: {
|
|
1086
1086
|
maxWidth: '100%',
|
|
1087
1087
|
height: 'auto',
|
|
1088
1088
|
} }) }))] }));
|
|
1089
1089
|
};
|
|
1090
1090
|
IncrementNumber.displayName = 'IncrementNumber';
|
|
1091
1091
|
|
|
1092
|
-
var styles$
|
|
1092
|
+
var styles$d = {"link":"Link-module_link__8oxip","s":"Link-module_s__YsU8H","m":"Link-module_m__8-UFj","bold":"Link-module_bold__H3baG","medium":"Link-module_medium__nuncU","regular":"Link-module_regular__4VBH2","disabledUnderlined":"Link-module_disabledUnderlined__rLghi"};
|
|
1093
1093
|
|
|
1094
1094
|
/**
|
|
1095
1095
|
*
|
|
@@ -1119,15 +1119,15 @@ var styles$c = {"link":"Link-module_link__8oxip","s":"Link-module_s__YsU8H","m":
|
|
|
1119
1119
|
var Link = function (_a) {
|
|
1120
1120
|
var children = _a.children, variant = _a.variant, weight = _a.weight, href = _a.href, target = _a.target, _b = _a.disabledUnderlined, disabledUnderlined = _b === undefined ? false : _b, rel = _a.rel, rest = __rest(_a, ["children", "variant", "weight", "href", "target", "disabledUnderlined", "rel"]);
|
|
1121
1121
|
return (jsx("a", __assign({}, rest, { href: href || '#', target: target, rel: rel, className: [
|
|
1122
|
-
styles$
|
|
1123
|
-
styles$
|
|
1124
|
-
styles$
|
|
1125
|
-
disabledUnderlined ? styles$
|
|
1122
|
+
styles$d['link'],
|
|
1123
|
+
styles$d[variant || ''],
|
|
1124
|
+
styles$d[weight || ''],
|
|
1125
|
+
disabledUnderlined ? styles$d['disabledUnderlined'] : '',
|
|
1126
1126
|
].join(' '), children: children })));
|
|
1127
1127
|
};
|
|
1128
1128
|
Link.displayName = 'Link';
|
|
1129
1129
|
|
|
1130
|
-
var styles$
|
|
1130
|
+
var styles$c = {"modal":"Modal-module_modal__gMPgi","body":"Modal-module_body__OhLb0","header":"Modal-module_header__5sBzU"};
|
|
1131
1131
|
|
|
1132
1132
|
var Modal = function (_a) {
|
|
1133
1133
|
var isOpen = _a.isOpen, onClose = _a.onClose, noLabel = _a.noLabel, yesLabel = _a.yesLabel, invertColors = _a.invertColors, underButton = _a.underButton, no = _a.no, yes = _a.yes, _b = _a.size, size = _b === undefined ? 'sm' : _b, _c = _a.padding, padding = _c === undefined ? 'sm' : _c, _d = _a.customRadius, customRadius = _d === undefined ? 16 : _d, children = _a.children, _e = _a.disabled, disabled = _e === undefined ? false : _e;
|
|
@@ -1152,9 +1152,9 @@ var Modal = function (_a) {
|
|
|
1152
1152
|
title: 'Close modal',
|
|
1153
1153
|
icon: jsx(Close, { fill: "var(--color-neutral-200)" }),
|
|
1154
1154
|
}, classNames: {
|
|
1155
|
-
content: styles$
|
|
1156
|
-
body: styles$
|
|
1157
|
-
header: styles$
|
|
1155
|
+
content: styles$c.modal,
|
|
1156
|
+
body: styles$c.body,
|
|
1157
|
+
header: styles$c.header,
|
|
1158
1158
|
}, styles: {
|
|
1159
1159
|
body: {
|
|
1160
1160
|
padding: paddingMap[padding],
|
|
@@ -1180,7 +1180,7 @@ var Warning = function (_a) {
|
|
|
1180
1180
|
};
|
|
1181
1181
|
Warning.displayName = 'Warning';
|
|
1182
1182
|
|
|
1183
|
-
var styles$
|
|
1183
|
+
var styles$b = {"message":"Message-module_message__HyLo0","general":"Message-module_general__jNnP2","alert":"Message-module_alert__3mQLB","negative":"Message-module_negative__H-tsT","positive":"Message-module_positive__CU0EL","success":"Message-module_success__08wEY","center":"Message-module_center__Y4KjG","top":"Message-module_top__J-o9d","bottom":"Message-module_bottom__2p2bW"};
|
|
1184
1184
|
|
|
1185
1185
|
/**
|
|
1186
1186
|
* Message component for displaying feedback to the user.
|
|
@@ -1196,6 +1196,7 @@ var styles$a = {"message":"Message-module_message__HyLo0","general":"Message-mod
|
|
|
1196
1196
|
*/
|
|
1197
1197
|
var getIcon = function (status) {
|
|
1198
1198
|
switch (status) {
|
|
1199
|
+
case 'success':
|
|
1199
1200
|
case 'positive':
|
|
1200
1201
|
return (jsx(Tick, { outlined: true, height: "1.5rem", width: "1.5rem", viewBox: "0 0 24 24", stroke: "var(--color-secondary-500)" }));
|
|
1201
1202
|
case 'negative':
|
|
@@ -1210,18 +1211,18 @@ var getIcon = function (status) {
|
|
|
1210
1211
|
};
|
|
1211
1212
|
var Message = function (_a) {
|
|
1212
1213
|
var content = _a.content, _b = _a.variant, variant = _b === undefined ? 'form' : _b, _c = _a.status, status = _c === undefined ? 'general' : _c, _d = _a.iconAlignment, iconAlignment = _d === undefined ? 'center' : _d;
|
|
1213
|
-
return (jsxs(Flex, { className: classNames(styles$
|
|
1214
|
+
return (jsxs(Flex, { className: classNames(styles$b.message, styles$b[status], styles$b[variant]), children: [jsx(Flex, { className: styles$b[iconAlignment], children: getIcon(status) }), typeof content === 'string' ? (jsx(Text, { variant: "xs", children: content })) : (content)] }));
|
|
1214
1215
|
};
|
|
1215
1216
|
Message.displayName = 'Message';
|
|
1216
1217
|
|
|
1217
1218
|
var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","inputFocused":"Multiselect-module_inputFocused__rm-OP","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT","pillText":"Multiselect-module_pillText__6hobG"};
|
|
1218
1219
|
|
|
1219
|
-
var styles$
|
|
1220
|
+
var styles$a = {"tooltip":"Tooltip-module_tooltip__Q1YfF"};
|
|
1220
1221
|
|
|
1221
1222
|
var Tooltip = function (_a) {
|
|
1222
1223
|
var children = _a.children, props = __rest(_a, ["children"]);
|
|
1223
1224
|
return (jsx(Tooltip$1, __assign({}, props, { classNames: {
|
|
1224
|
-
tooltip: styles$
|
|
1225
|
+
tooltip: styles$a.tooltip,
|
|
1225
1226
|
}, offset: 4, children: children })));
|
|
1226
1227
|
};
|
|
1227
1228
|
Tooltip.displayName = 'Tooltip';
|
|
@@ -1372,17 +1373,17 @@ var MultiselectInternal = function (_a) {
|
|
|
1372
1373
|
}, onClick: function (e) { return e.stopPropagation(); } }))] }));
|
|
1373
1374
|
};
|
|
1374
1375
|
PillAndSearchSection.displayName = 'PillAndSearchSection';
|
|
1375
|
-
var ErrorSection = (jsxs(Flex, { className: styles$
|
|
1376
|
-
var DescriptionSection = (jsx(Flex, { className: styles$
|
|
1376
|
+
var ErrorSection = (jsxs(Flex, { className: styles$p.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$p.errorText), children: error })] }));
|
|
1377
|
+
var DescriptionSection = (jsx(Flex, { className: styles$p.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
|
|
1377
1378
|
var dropdownFooter = function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); };
|
|
1378
1379
|
return (jsx(Dropdown, { options: dropdownOptions, maxHeight: 300, footer: dropdownFooter, children: function (store) {
|
|
1379
1380
|
var _a, _b;
|
|
1380
1381
|
var floatLabel = store.dropdownOpened || hasSelectedOptions;
|
|
1381
|
-
return (jsxs("div", { className: styles$
|
|
1382
|
-
_a[styles$
|
|
1383
|
-
_a[styles$
|
|
1384
|
-
_a)), children: label })), jsxs(Box, { className: classNames(styles$
|
|
1385
|
-
_b[styles$
|
|
1382
|
+
return (jsxs("div", { className: styles$p.container, children: [floatLabel && (jsx("label", { className: classNames(styles$p.label, (_a = {},
|
|
1383
|
+
_a[styles$p.labelError] = error && !isFocused,
|
|
1384
|
+
_a[styles$p.labelFocused] = isFocused || isHovered,
|
|
1385
|
+
_a)), children: label })), jsxs(Box, { className: classNames(styles$p.input, multiselectStyles.input, (_b = {},
|
|
1386
|
+
_b[styles$p.inputError] = error && !isFocused,
|
|
1386
1387
|
_b[multiselectStyles.inputFocused] = isFocused || store.dropdownOpened,
|
|
1387
1388
|
_b[multiselectStyles.disabled] = disabled,
|
|
1388
1389
|
_b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
|
|
@@ -1470,15 +1471,15 @@ var NavBar = function (_a) {
|
|
|
1470
1471
|
};
|
|
1471
1472
|
NavBar.displayName = 'NavBar';
|
|
1472
1473
|
|
|
1473
|
-
var styles$
|
|
1474
|
+
var styles$9 = {"navbarSideContainer":"NavBarSide-module_navbarSideContainer__P8vLp","tabsRoot":"NavBarSide-module_tabsRoot__AAHNn","tabsList":"NavBarSide-module_tabsList__q9npG","tab":"NavBarSide-module_tab__i8yDE","tabsPanel":"NavBarSide-module_tabsPanel__-JWPo"};
|
|
1474
1475
|
|
|
1475
1476
|
var NavBarSide = function (_a) {
|
|
1476
1477
|
var tabs = _a.tabs, onChange = _a.onChange, value = _a.value;
|
|
1477
|
-
return (jsx("div", { className: styles$
|
|
1478
|
-
list: styles$
|
|
1479
|
-
tab: styles$
|
|
1480
|
-
panel: styles$
|
|
1481
|
-
root: styles$
|
|
1478
|
+
return (jsx("div", { className: styles$9.navbarSideContainer, children: jsxs(Tabs$1, { value: value, onChange: onChange, orientation: "vertical", keepMounted: false, classNames: {
|
|
1479
|
+
list: styles$9.tabsList,
|
|
1480
|
+
tab: styles$9.tab,
|
|
1481
|
+
panel: styles$9.tabsPanel,
|
|
1482
|
+
root: styles$9.tabsRoot,
|
|
1482
1483
|
}, children: [jsx(Tabs$1.List, { children: tabs.map(function (tab) { return (jsx(Tabs$1.Tab, { value: tab.value, "data-active": undefined, children: tab.label }, tab.value)); }) }), tabs.map(function (tab) { return (jsx(Tabs$1.Panel, { value: tab.value, children: tab.content }, tab.value)); })] }) }));
|
|
1483
1484
|
};
|
|
1484
1485
|
NavBarSide.displayName = 'NavBarSide';
|
|
@@ -1541,7 +1542,7 @@ var PasswordInput = function (_a) {
|
|
|
1541
1542
|
};
|
|
1542
1543
|
PasswordInput.displayName = 'PasswordInput';
|
|
1543
1544
|
|
|
1544
|
-
var styles$
|
|
1545
|
+
var styles$8 = {"pill":"Pill-module_pill__LeCgu","badge":"Pill-module_badge__DN2xw","secondary":"Pill-module_secondary__gu5Nq","text":"Pill-module_text__kUgzL","secondarySelected":"Pill-module_secondarySelected__-f9tB","primary":"Pill-module_primary__ZlP8y","primarySelected":"Pill-module_primarySelected__JC8JY","disabled":"Pill-module_disabled__1KocP"};
|
|
1545
1546
|
|
|
1546
1547
|
/**
|
|
1547
1548
|
* Pill component is used to display a pill with a label and an optional icon
|
|
@@ -1559,12 +1560,40 @@ var styles$7 = {"pill":"Pill-module_pill__LeCgu","badge":"Pill-module_badge__DN2
|
|
|
1559
1560
|
var Pill = function (_a) {
|
|
1560
1561
|
var label = _a.label, rightIcon = _a.rightIcon, leftIcon = _a.leftIcon, _b = _a.isSelected, isSelected = _b === undefined ? false : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === undefined ? false : _c, _d = _a.className, className = _d === undefined ? '' : _d, dataFsElement = _a.dataFsElement, _e = _a.variant, variant = _e === undefined ? 'secondary' : _e;
|
|
1561
1562
|
var variantClass = isSelected
|
|
1562
|
-
? styles$
|
|
1563
|
-
: styles$
|
|
1564
|
-
return (jsxs("div", __assign({ className: classNames(styles$
|
|
1563
|
+
? styles$8["".concat(variant, "Selected")]
|
|
1564
|
+
: styles$8[variant];
|
|
1565
|
+
return (jsxs("div", __assign({ className: classNames(styles$8.pill, variantClass, disabled && styles$8.disabled, className), onClick: disabled ? undefined : onClick }, (dataFsElement ? { 'data-fs-element': dataFsElement } : {}), { children: [leftIcon, jsx(Text, { variant: "xs", weight: "medium", className: "\n ".concat(styles$8.text, "\n ").concat(isSelected ? styles$8.selectedText : '', "\n ").concat(disabled ? styles$8.disabledText : '', "\n "), children: label }), rightIcon] })));
|
|
1565
1566
|
};
|
|
1566
1567
|
Pill.displayName = 'Pill';
|
|
1567
1568
|
|
|
1569
|
+
var StepIndicator = function (_a) {
|
|
1570
|
+
var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === undefined ? 'var(--color-primary-300)' : _e, _f = _a.fill, fill = _f === undefined ? 'var(--color-primary-50)' : _f, _g = _a.rotate, rotate = _g === undefined ? 0 : _g, props = __rest(_a, ["width", "height", "viewBox", "stroke", "fill", "rotate"]);
|
|
1571
|
+
return (jsxs(Icon, __assign({}, props, { width: width, height: height, viewBox: viewBox, rotate: rotate, stroke: "var(--color-primary-50)", children: [jsx("circle", { cx: "16", cy: "16", r: "16", fill: "var(--color-primary-50)" }), jsx("path", { d: "M16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25Z", stroke: stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "16", cy: "16", r: "1.25", stroke: stroke, strokeWidth: "1.5", fill: fill })] })));
|
|
1572
|
+
};
|
|
1573
|
+
StepIndicator.displayName = 'StepIndicator';
|
|
1574
|
+
|
|
1575
|
+
var styles$7 = {"wrapper":"ProgressStepper-module_wrapper__ELFBB","circle":"ProgressStepper-module_circle__MaKFo","line":"ProgressStepper-module_line__pQ1eN"};
|
|
1576
|
+
|
|
1577
|
+
/**
|
|
1578
|
+
* ProgressStepper component, use it to show progress across a fixed number
|
|
1579
|
+
* of steps as a horizontal line of circular indicators
|
|
1580
|
+
*
|
|
1581
|
+
* @param {number} totalSteps - Total number of steps to render
|
|
1582
|
+
* @param {number} active - Current active step (0-indexed)
|
|
1583
|
+
*
|
|
1584
|
+
* @returns {React.ReactElement} The ProgressStepper component
|
|
1585
|
+
*
|
|
1586
|
+
*/
|
|
1587
|
+
var ProgressStepper = function (_a) {
|
|
1588
|
+
var totalSteps = _a.totalSteps, active = _a.active, className = _a.className;
|
|
1589
|
+
return (jsx("div", { className: "".concat(styles$7.wrapper, " ").concat(className !== null && className !== undefined ? className : ''), children: Array.from({ length: totalSteps }).map(function (_, index) {
|
|
1590
|
+
var state = index < active ? 'completed' : index === active ? 'active' : 'pending';
|
|
1591
|
+
var isLast = index === totalSteps - 1;
|
|
1592
|
+
return (jsxs(React.Fragment, { children: [jsxs("div", { className: styles$7.circle, "data-state": state, children: [state === 'completed' && (jsx(Tick, { width: "14px", height: "14px", viewBox: "0 0 32 32", stroke: "var(--color-primary-300)", strokeWidth: 3 })), state === 'active' && (jsx(StepIndicator, { width: "24px", height: "24px" }))] }), !isLast && (jsx("div", { className: styles$7.line, "data-state": index < active ? 'completed' : 'pending' }))] }, index));
|
|
1593
|
+
}) }));
|
|
1594
|
+
};
|
|
1595
|
+
ProgressStepper.displayName = 'ProgressStepper';
|
|
1596
|
+
|
|
1568
1597
|
var styles$6 = {"radio":"RadioButton-module_radio__0A47m","label":"RadioButton-module_label__4gTzQ","disabled-label":"RadioButton-module_disabled-label__Nk0NW"};
|
|
1569
1598
|
|
|
1570
1599
|
/**
|
|
@@ -1590,7 +1619,7 @@ var RadioButton = function (_a) {
|
|
|
1590
1619
|
};
|
|
1591
1620
|
RadioButton.displayName = 'RadioButton';
|
|
1592
1621
|
|
|
1593
|
-
var styles$5 = {"root":"SegmentedControl-module_root__iVJTH","control":"SegmentedControl-module_control__siwFH","input":"SegmentedControl-module_input__HW-AN","label":"SegmentedControl-module_label__V69j4","indicator":"SegmentedControl-module_indicator__IxU-O"};
|
|
1622
|
+
var styles$5 = {"root":"SegmentedControl-module_root__iVJTH","control":"SegmentedControl-module_control__siwFH","input":"SegmentedControl-module_input__HW-AN","label":"SegmentedControl-module_label__V69j4","labelMd":"SegmentedControl-module_labelMd__TGlTX","labelSm":"SegmentedControl-module_labelSm__Ptfpq","indicator":"SegmentedControl-module_indicator__IxU-O"};
|
|
1594
1623
|
|
|
1595
1624
|
/**
|
|
1596
1625
|
* SegmentedControl component for selecting a single option from a set (mutually exclusive options).
|
|
@@ -1600,15 +1629,20 @@ var styles$5 = {"root":"SegmentedControl-module_root__iVJTH","control":"Segmente
|
|
|
1600
1629
|
* @param {SegmentedControlItem[]} data - An array of objects containing value, label, icon and disabled status for each option.
|
|
1601
1630
|
* @param {string} value - The value associated with the selected option.
|
|
1602
1631
|
* @param {(value: string) => void} onChange - Callback fired when the selection changes.
|
|
1632
|
+
* @param {'md' | 'sm'} size - Controls the label padding; 'md' (default) is 24px, 'sm' is 16px.
|
|
1603
1633
|
* @returns {JSX.Element} The rendered SegmentedControl component adhering to the design system.
|
|
1604
1634
|
*/
|
|
1605
1635
|
var SegmentedControl = function (_a) {
|
|
1606
|
-
var
|
|
1636
|
+
var _b;
|
|
1637
|
+
var data = _a.data, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === undefined ? 'md' : _c;
|
|
1607
1638
|
return (jsx(SegmentedControl$1, { classNames: {
|
|
1608
1639
|
root: styles$5.root,
|
|
1609
1640
|
control: styles$5.control,
|
|
1610
1641
|
input: styles$5.input,
|
|
1611
|
-
label: styles$5.label,
|
|
1642
|
+
label: classNames(styles$5.label, (_b = {},
|
|
1643
|
+
_b[styles$5.labelMd] = size === 'md',
|
|
1644
|
+
_b[styles$5.labelSm] = size === 'sm',
|
|
1645
|
+
_b)),
|
|
1612
1646
|
indicator: styles$5.indicator,
|
|
1613
1647
|
}, data: data.map(function (item) { return (__assign(__assign({}, item), { label: typeof item.label === 'string' ? (jsxs(Flex, { align: "center", direction: "column", gap: 8, children: [item.icon, jsx(Text, { variant: "m", color: item.disabled
|
|
1614
1648
|
? 'var(--color-neutral-500)'
|
|
@@ -1718,12 +1752,6 @@ var Arrow = function (_a) {
|
|
|
1718
1752
|
};
|
|
1719
1753
|
Arrow.displayName = 'Arrow';
|
|
1720
1754
|
|
|
1721
|
-
var StepIndicator = function (_a) {
|
|
1722
|
-
var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === undefined ? 'var(--color-primary-300)' : _e, _f = _a.fill, fill = _f === undefined ? 'var(--color-primary-50)' : _f, _g = _a.rotate, rotate = _g === undefined ? 0 : _g, props = __rest(_a, ["width", "height", "viewBox", "stroke", "fill", "rotate"]);
|
|
1723
|
-
return (jsxs(Icon, __assign({}, props, { width: width, height: height, viewBox: viewBox, rotate: rotate, stroke: "var(--color-primary-50)", children: [jsx("circle", { cx: "16", cy: "16", r: "16", fill: "var(--color-primary-50)" }), jsx("path", { d: "M16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25Z", stroke: stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "16", cy: "16", r: "1.25", stroke: stroke, strokeWidth: "1.5", fill: fill })] })));
|
|
1724
|
-
};
|
|
1725
|
-
StepIndicator.displayName = 'StepIndicator';
|
|
1726
|
-
|
|
1727
1755
|
/**
|
|
1728
1756
|
* Stepper component, use it to select an option from a list of options
|
|
1729
1757
|
* For selecting multiple options, use the MultipleSelect component
|
|
@@ -1735,6 +1763,7 @@ StepIndicator.displayName = 'StepIndicator';
|
|
|
1735
1763
|
* @param {React.ReactNode} backButton - Custom back button
|
|
1736
1764
|
* @param {React.ReactNode} nextButton - Custom next button
|
|
1737
1765
|
* @param {boolean} allowNextStepsSelect - Whether to allow selecting next steps
|
|
1766
|
+
* @param {'full' | 'half'} progressBarVariant - 'full' fills progress bar for the active step (default), 'half' fills only halfway through it
|
|
1738
1767
|
* @param {Step[]} stepCompleted - Content to show when all steps are completed
|
|
1739
1768
|
*
|
|
1740
1769
|
* @returns {React.ReactElement} The Stepper component
|
|
@@ -1742,9 +1771,9 @@ StepIndicator.displayName = 'StepIndicator';
|
|
|
1742
1771
|
*/
|
|
1743
1772
|
var Stepper = function (_a) {
|
|
1744
1773
|
var _b, _c, _d;
|
|
1745
|
-
var steps = _a.steps, controlledActive = _a.active, _e = _a.fullSize, fullSize = _e === undefined ? false : _e, onStepChange = _a.onStepChange, _f = _a.showControls, showControls = _f === undefined ? true : _f, backButton = _a.backButton, nextButton = _a.nextButton, _g = _a.allowNextStepsSelect, allowNextStepsSelect = _g === undefined ? false : _g, stepCompleted = _a.stepCompleted, completedComponent = _a.completedComponent, props = __rest(_a, ["steps", "active", "fullSize", "onStepChange", "showControls", "backButton", "nextButton", "allowNextStepsSelect", "stepCompleted", "completedComponent"]);
|
|
1746
|
-
var
|
|
1747
|
-
var
|
|
1774
|
+
var steps = _a.steps, controlledActive = _a.active, _e = _a.fullSize, fullSize = _e === undefined ? false : _e, onStepChange = _a.onStepChange, _f = _a.showControls, showControls = _f === undefined ? true : _f, backButton = _a.backButton, nextButton = _a.nextButton, _g = _a.allowNextStepsSelect, allowNextStepsSelect = _g === undefined ? false : _g, _h = _a.progressBarVariant, progressBarVariant = _h === undefined ? 'full' : _h, stepCompleted = _a.stepCompleted, completedComponent = _a.completedComponent, props = __rest(_a, ["steps", "active", "fullSize", "onStepChange", "showControls", "backButton", "nextButton", "allowNextStepsSelect", "progressBarVariant", "stepCompleted", "completedComponent"]);
|
|
1775
|
+
var _j = useState(0), internalActive = _j[0], setInternalActive = _j[1];
|
|
1776
|
+
var _k = useState(false), isCompleted = _k[0], setIsCompleted = _k[1];
|
|
1748
1777
|
var active = controlledActive !== null && controlledActive !== undefined ? controlledActive : internalActive;
|
|
1749
1778
|
var setActive = function (step) {
|
|
1750
1779
|
if (controlledActive === undefined) {
|
|
@@ -1761,6 +1790,9 @@ var Stepper = function (_a) {
|
|
|
1761
1790
|
}
|
|
1762
1791
|
};
|
|
1763
1792
|
var prevStep = function () { return setActive(active > 0 ? active - 1 : active); };
|
|
1793
|
+
var progressValue = progressBarVariant === 'half'
|
|
1794
|
+
? ((active + 0.5) / steps.length) * 100
|
|
1795
|
+
: ((active + 1) / steps.length) * 100;
|
|
1764
1796
|
if (isCompleted) {
|
|
1765
1797
|
return (jsx(Flex, { justify: "center", children: completedComponent || (jsx("div", { children: stepCompleted
|
|
1766
1798
|
? stepCompleted.map(function (step, idx) { return (jsx("div", { children: step.content || step.label }, idx)); })
|
|
@@ -1775,7 +1807,7 @@ var Stepper = function (_a) {
|
|
|
1775
1807
|
step: styles$3.step,
|
|
1776
1808
|
}, children: steps.map(function (step, index) { return (jsx(StepperStep, { label: step.label, classNames: {
|
|
1777
1809
|
stepLabel: index === active ? styles$3.stepLabelInactive : styles$3.stepLabel,
|
|
1778
|
-
}, icon: jsx(Notification, { width: "32px", height: "32px", fill: "var(--color-white)" }) }, index)); }) })), jsx(Flex, { className: styles$3.progressWrapper, children: jsx(Progress, { value:
|
|
1810
|
+
}, icon: jsx(Notification, { width: "32px", height: "32px", fill: "var(--color-white)" }) }, index)); }) })), jsx(Flex, { className: styles$3.progressWrapper, children: jsx(Progress, { value: progressValue, size: 10, radius: "xl", color: "var(--color-primary-200)", w: fullSize ? '100%' : '60%' }) }), jsx(Flex, { className: styles$3.stepWrapper, children: (_b = steps[active]) === null || _b === undefined ? undefined : _b.content }), showControls && (jsxs(Flex, { className: styles$3.buttonsWrapper, children: [active > 0 ? (backButton ? (backButton({ prevStep: prevStep, active: active })) : (jsx(Button, { variant: "outlined", size: "medium", onClick: prevStep, icon: jsx(Arrow, { width: "18px", height: "18px", rotate: 180 }), children: "Back" }))) : (jsx("div", {})), nextButton ? (nextButton({
|
|
1779
1811
|
nextStep: nextStep,
|
|
1780
1812
|
active: active,
|
|
1781
1813
|
disabled: ((_c = steps[active]) === null || _c === undefined ? undefined : _c.isValid) === false,
|
|
@@ -1883,14 +1915,14 @@ var Textarea = function (_a) {
|
|
|
1883
1915
|
var _j = useState(false), isHovered = _j[0], setIsHovered = _j[1];
|
|
1884
1916
|
var showLabel = !hideLabel && (isFocused || value.trim());
|
|
1885
1917
|
var ErrorSection = useMemo(function () {
|
|
1886
|
-
return holdSpace && (jsxs(Flex, { className: styles$
|
|
1918
|
+
return holdSpace && (jsxs(Flex, { className: styles$p.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$p.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
|
|
1887
1919
|
}, [error]);
|
|
1888
|
-
return (jsxs("div", { className: styles$
|
|
1889
|
-
_b[styles$
|
|
1890
|
-
_b[styles$
|
|
1920
|
+
return (jsxs("div", { className: styles$p.container, children: [showLabel && (jsx("label", { className: classNames(styles$p.label, (_b = {},
|
|
1921
|
+
_b[styles$p.labelError] = error && !isFocused,
|
|
1922
|
+
_b[styles$p.labelFocused] = isFocused || isHovered,
|
|
1891
1923
|
_b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, children: jsx(Textarea$1, __assign({ classNames: {
|
|
1892
|
-
input: classNames(styles$
|
|
1893
|
-
_c[styles$
|
|
1924
|
+
input: classNames(styles$p.input, (_c = {},
|
|
1925
|
+
_c[styles$p.inputError] = error,
|
|
1894
1926
|
_c)),
|
|
1895
1927
|
}, placeholder: placeholder !== null && placeholder !== undefined ? placeholder : label, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: inputDescriptionProps, errorProps: inputErrorProps, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange, autosize: rest.h ? false : rest.autosize, minRows: 2 }, rest, { styles: {
|
|
1896
1928
|
input: {
|
|
@@ -1976,6 +2008,12 @@ var Check = function (_a) {
|
|
|
1976
2008
|
};
|
|
1977
2009
|
Check.displayName = 'Check';
|
|
1978
2010
|
|
|
2011
|
+
var CheckSquare = function (_a) {
|
|
2012
|
+
var _b = _a.width, width = _b === undefined ? '14px' : _b, _c = _a.height, height = _c === undefined ? '14px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 14 14' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e, _f = _a.stroke, stroke = _f === undefined ? 'currentColor' : _f;
|
|
2013
|
+
return (jsxs(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: [jsxs("g", { clipPath: "url(#clip0_14598_32135)", children: [jsx("path", { d: "M10.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V10.5C0.5 12.1569 1.84315 13.5 3.5 13.5H10.5C12.1569 13.5 13.5 12.1569 13.5 10.5V3.5C13.5 1.84315 12.1569 0.5 10.5 0.5Z", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M9.91711 4.75L5.91711 9.75L3.91711 8.25", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_14598_32135", children: jsx("rect", { width: width, height: height, fill: "white" }) }) })] }));
|
|
2014
|
+
};
|
|
2015
|
+
CheckSquare.displayName = 'CheckSquare';
|
|
2016
|
+
|
|
1979
2017
|
var Cloud = function (_a) {
|
|
1980
2018
|
var _b = _a.width, width = _b === undefined ? '28' : _b, _c = _a.height, height = _c === undefined ? '21' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 28 21' : _d, _e = _a.fill, fill = _e === undefined ? 'none' : _e, _f = _a.stroke, stroke = _f === undefined ? 'currentColor' : _f, _g = _a.strokeWidth, strokeWidth = _g === undefined ? 1.5 : _g;
|
|
1981
2019
|
return (jsx(Icon, { width: width, height: height, fill: fill, viewBox: viewBox, children: jsx("path", { d: "M0.75 14.05C0.75 17.198 3.43629 19.75 6.75 19.75H21.75C24.5114 19.75 26.75 17.6234 26.75 15C26.75 12.9707 25.4104 11.2386 23.5255 10.5582C23.6709 10.1644 23.75 9.74098 23.75 9.3C23.75 7.20132 21.9591 5.5 19.75 5.5C19.319 5.5 18.9039 5.56477 18.5149 5.68461C17.7186 2.8433 14.9916 0.75 11.75 0.75C7.88401 0.75 4.75 3.72731 4.75 7.4C4.75 7.82209 4.79139 8.23499 4.87053 8.63524C2.4774 9.38448 0.75 11.5256 0.75 14.05Z", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
@@ -1994,6 +2032,12 @@ var CreditCard = function (_a) {
|
|
|
1994
2032
|
};
|
|
1995
2033
|
CreditCard.displayName = 'CreditCard';
|
|
1996
2034
|
|
|
2035
|
+
var Curriculum = function (_a) {
|
|
2036
|
+
var _b = _a.width, width = _b === undefined ? '12px' : _b, _c = _a.height, height = _c === undefined ? '14px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 12 14' : _d, _e = _a.fill, fill = _e === undefined ? 'transparent' : _e, _f = _a.stroke, stroke = _f === undefined ? 'currentColor' : _f;
|
|
2037
|
+
return (jsxs(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: [jsx("path", { d: "M3.09766 3.65061C3.09766 4.28594 3.61269 4.80098 4.24802 4.80098C4.40864 4.80098 4.56156 4.76806 4.70043 4.70861C5.11085 4.53288 5.39839 4.12533 5.39839 3.65061C5.39839 3.01528 4.88335 2.50024 4.24802 2.50024C3.61269 2.50024 3.09766 3.01528 3.09766 3.65061Z", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M2.5 5.94004C2.68279 5.59237 2.9397 5.30502 3.24602 5.10563C3.55234 4.90624 3.89777 4.80151 4.24911 4.80151C4.60045 4.80151 4.94588 4.90624 5.2522 5.10563C5.55852 5.30502 5.81543 5.59237 5.99822 5.94004", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M11.5 12.5C11.5 12.7652 11.3946 13.0196 11.2071 13.2071C11.0196 13.3946 10.7652 13.5 10.5 13.5H1.5C1.23478 13.5 0.98043 13.3946 0.79289 13.2071C0.60536 13.0196 0.5 12.7652 0.5 12.5V1.5C0.5 1.23478 0.60536 0.98043 0.79289 0.792893C0.98043 0.605357 1.23478 0.5 1.5 0.5H8L11.5 4V12.5Z", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M2.5 8.5H9.5", stroke: stroke, strokeLinecap: "round" }), jsx("path", { d: "M2.5 11H6.5", stroke: stroke, strokeLinecap: "round" })] }));
|
|
2038
|
+
};
|
|
2039
|
+
Curriculum.displayName = 'Curriculum';
|
|
2040
|
+
|
|
1997
2041
|
var Delete = function (props) {
|
|
1998
2042
|
return (jsx(Icon, __assign({}, props, { viewBox: props.viewBox || '0 0 32 32', children: jsx("path", { d: "M26.671 8.4965H5.32874M18.6259 14.499V22.0021M13.3738 14.499V22.0021M20.7237 28.0046H11.276C9.70771 28.0046 8.40385 26.7972 8.28357 25.2336L6.9961 8.4965H25.0036L23.7161 25.2336C23.5958 26.7972 22.292 28.0046 20.7237 28.0046ZM12.2483 3.99463H19.7514C20.5802 3.99463 21.252 4.66648 21.252 5.49525V8.4965H10.7477V5.49525C10.7477 4.66648 11.4195 3.99463 12.2483 3.99463Z", stroke: props.stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
1999
2043
|
};
|
|
@@ -2010,6 +2054,12 @@ var Fingerprint = function (_a) {
|
|
|
2010
2054
|
};
|
|
2011
2055
|
Fingerprint.displayName = 'Fingerprint';
|
|
2012
2056
|
|
|
2057
|
+
var Flash = function (_a) {
|
|
2058
|
+
var _b = _a.width, width = _b === undefined ? '14px' : _b, _c = _a.height, height = _c === undefined ? '14px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 14 14' : _d, _e = _a.fill, fill = _e === undefined ? 'transparent' : _e, _f = _a.stroke, stroke = _f === undefined ? 'currentColor' : _f;
|
|
2059
|
+
return (jsx(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: jsx("path", { d: "M4.24991 0.5L1.99991 5.81C1.96879 5.88575 1.95676 5.96798 1.96486 6.04947C1.97296 6.13096 2.00095 6.20922 2.04638 6.27736C2.0918 6.34549 2.15327 6.40143 2.22538 6.44025C2.29748 6.47908 2.37802 6.49959 2.45991 6.5H5.24991L3.24991 13.5L11.8399 5.36C11.9113 5.29124 11.9606 5.20284 11.9816 5.106C12.0026 5.00917 11.9944 4.90827 11.9579 4.81612C11.9215 4.72397 11.8585 4.64473 11.777 4.58844C11.6954 4.53216 11.599 4.50137 11.4999 4.5H7.74991L9.74991 0.5H4.24991Z", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
2060
|
+
};
|
|
2061
|
+
Flash.displayName = 'Flash';
|
|
2062
|
+
|
|
2013
2063
|
var Google = function (props) {
|
|
2014
2064
|
return (jsxs(Icon, __assign({}, props, { stroke: "none", children: [jsx("path", { fill: "#4285F4", d: "M22 11.453c0-.83-.069-1.628-.196-2.394H11.647v4.532h5.804c-.255 1.457-1.02 2.691-2.167 3.521v2.947h3.5C20.824 18.016 22 15.016 22 11.452z" }), jsx("path", { fill: "#34A853", d: "M11.327 22.647c3.034 0 5.578-.997 7.438-2.707l-3.648-2.82c-1 .672-2.278 1.08-3.79 1.08-2.922 0-5.405-1.965-6.294-4.612H1.294v2.89a11.232 11.232 0 0010.033 6.169z" }), jsx("path", { fill: "#FBBC05", d: "M5.176 13.38a6.024 6.024 0 01-.374-2.057c0-.718.14-1.407.374-2.057V6.471H1.262A10.01 10.01 0 000 11.323c0 1.753.46 3.397 1.262 4.854L4.31 13.99l.866-.61z" }), jsx("path", { fill: "#EA4335", d: "M11.28 4.453c1.648 0 3.112.57 4.281 1.668l3.204-3.203C16.822 1.108 14.3 0 11.28 0 6.908 0 3.135 2.511 1.294 6.171L5.016 9.06c.885-2.644 3.356-4.606 6.264-4.606z" })] })));
|
|
2015
2065
|
};
|
|
@@ -2037,6 +2087,12 @@ var House = function (_a) {
|
|
|
2037
2087
|
};
|
|
2038
2088
|
House.displayName = 'House';
|
|
2039
2089
|
|
|
2090
|
+
var HouseCheck = function (_a) {
|
|
2091
|
+
var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === undefined ? 'currentColor' : _e, _f = _a.strokeWidth, strokeWidth = _f === undefined ? 1.5 : _f, _g = _a.fill, fill = _g === undefined ? 'none' : _g;
|
|
2092
|
+
return (jsx(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: jsxs("g", { stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, opacity: "0.9", children: [jsx("path", { d: "M1 11.262l10.58-9.069c.817-.7 2.023-.7 2.84 0L25 11.263" }), jsx("path", { d: "M23.288 9.817V2.09A1.09 1.09 0 0022.197 1h-3.273a1.09 1.09 0 00-1.09 1.09v3.051M21 14.333A5.333 5.333 0 1121 25a5.333 5.333 0 010-10.667M19 20.286l1.875 1.714 3.125-4M9.732 23.669v-6.91c0-.602.488-1.09 1.09-1.09h2.183M2.715 9.82v13.85M13 23.67H1" })] }) }));
|
|
2093
|
+
};
|
|
2094
|
+
HouseCheck.displayName = 'HouseCheck';
|
|
2095
|
+
|
|
2040
2096
|
var HouseTime = function (_a) {
|
|
2041
2097
|
var _b = _a.width, width = _b === undefined ? '32px' : _b, _c = _a.height, height = _c === undefined ? '32px' : _c, _d = _a.viewBox, viewBox = _d === undefined ? '0 0 32 32' : _d, _e = _a.stroke, stroke = _e === undefined ? 'currentColor' : _e, _f = _a.fill, fill = _f === undefined ? 'none' : _f;
|
|
2042
2098
|
return (jsx(Icon, { width: width, height: height, viewBox: viewBox, fill: fill, children: jsxs("g", { stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", opacity: "0.9", children: [jsx("path", { d: "M1 11.262l10.58-9.069c.817-.7 2.023-.7 2.84 0L25 11.263" }), jsx("path", { d: "M23.288 9.817V2.09A1.09 1.09 0 0022.197 1h-3.273a1.09 1.09 0 00-1.09 1.09v3.051M21 14.333A5.333 5.333 0 1121 25a5.333 5.333 0 010-10.667M23.432 19.947h-2.59M20.84 19.946v-3.121M9.732 23.669v-6.91c0-.602.488-1.09 1.09-1.09h2.183M2.715 9.82v13.85M13 23.67H1" })] }) }));
|
|
@@ -2138,5 +2194,5 @@ var World = function (_a) {
|
|
|
2138
2194
|
};
|
|
2139
2195
|
World.displayName = 'World';
|
|
2140
2196
|
|
|
2141
|
-
export {
|
|
2142
|
-
//# sourceMappingURL=index-
|
|
2197
|
+
export { Arrow as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, StatusBadge as G, Stepper as H, IncrementNumber as I, Tabs as J, Text as K, Link as L, Message as M, NavBar as N, Textarea as O, Pagination as P, ToastContainer as Q, RadioButton as R, SegmentedControl as S, Table as T, Tooltip as U, AIGenerate as V, AIPrompt as W, AIRedo as X, AISearch as Y, Alert as Z, Archive as _, AccordionItem as a, Attachment as a0, AvatarPlaceholder as a1, Bell as a2, Calendar as a3, Camera as a4, Cat as a5, Chat as a6, Check as a7, CheckSquare as a8, Chevron as a9, MenuTouched as aA, Notification as aB, Open as aC, Pets as aD, Phone as aE, Plaid as aF, Plus as aG, Refresh as aH, Remove as aI, Search as aJ, Shield as aK, StepIndicator as aL, ThreeDots as aM, ThumbsDown as aN, Tick as aO, Umbrello as aP, Upload as aQ, Visa as aR, Warning as aS, World as aT, capitalizeFirstSentenceLetter as aU, ChevronCollapse as aa, Clock as ab, Close as ac, Cloud as ad, CloudUpload as ae, CreditCard as af, Curriculum as ag, Delete as ah, Document as ai, Dog as aj, EyeHide as ak, EyeShow as al, Fingerprint as am, Flash as an, Google as ao, Grid as ap, Hamburger as aq, HappyFace as ar, House as as, HouseCheck as at, HouseTime as au, Identification as av, Info as aw, Location as ax, Mail as ay, Menu as az, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, Avatar as h, badgeVariantMap as i, Button as j, cardStatusVariantMap as k, CardStatus as l, Checkbox as m, Chip as n, Dropdown as o, FileUpload as p, Input as q, LinkModal as r, Loader as s, Modal as t, Multiselect as u, NavBarSide as v, PasswordInput as w, Pill as x, ProgressStepper as y, Select as z };
|
|
2198
|
+
//# sourceMappingURL=index-C2t8gcjZ.js.map
|