bord-design-system 0.0.12 → 0.0.13
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/components/index.d.ts +31 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.d.ts +310 -27
- package/dist/index.esm.js +962 -79
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +991 -78
- package/dist/index.js.map +1 -1
- package/dist/index.webpack.js +962 -79
- package/dist/index.webpack.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useState, useEffect, createElement, createContext, isValidElement, useRef, useContext, useCallback, useMemo, cloneElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
|
+
import { DateTime } from 'luxon';
|
|
4
5
|
|
|
5
6
|
const BordCircularFigmaAvatar = (props) => {
|
|
6
7
|
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", children: [jsx("rect", { width: "31", height: "31", x: ".5", y: ".5", fill: "#262B39", rx: "15.5" }), jsx("rect", { width: "31", height: "31", x: ".5", y: ".5", stroke: "#626C82", rx: "15.5" }), jsx("path", { stroke: "#C6C7CB", "stroke-miterlimit": "10", strokeWidth: "1.2", d: "M15.9996 8.5h-2.475c-1.425 0-2.55 1.125-2.55 2.475s1.125 2.475 2.475 2.475h2.55m0-4.95v4.95m0-4.95h2.475c1.35 0 2.475 1.125 2.475 2.475s-1.125 2.475-2.475 2.475h-2.475m-2.475 5.025c-1.35 0-2.475-1.125-2.475-2.475s1.125-2.475 2.475-2.475h2.475v4.95m-2.475 0h2.475m-2.475 0c-1.35 0-2.475 1.125-2.475 2.475s1.125 2.475 2.475 2.475 2.475-1.125 2.475-2.475v-2.475m2.475-4.95c1.35 0 2.475 1.125 2.475 2.475s-1.125 2.475-2.475 2.475-2.475-1.125-2.475-2.475 1.125-2.475 2.475-2.475Z" })] }));
|
|
@@ -2301,6 +2302,18 @@ const bordColorTheme = {
|
|
|
2301
2302
|
navyBlue: {
|
|
2302
2303
|
400: "#C6C7CB",
|
|
2303
2304
|
500: "#6F737D"},
|
|
2305
|
+
cyan: {
|
|
2306
|
+
300: "#22CFAB"},
|
|
2307
|
+
primary: {
|
|
2308
|
+
bgDefault: "#22CFAB"},
|
|
2309
|
+
disabled: {
|
|
2310
|
+
bgPrimary: "#626C82",
|
|
2311
|
+
fgSecondary: "#626C82",
|
|
2312
|
+
},
|
|
2313
|
+
content: {
|
|
2314
|
+
secondary: "#C6C7CB",
|
|
2315
|
+
default: "#FFF",
|
|
2316
|
+
},
|
|
2304
2317
|
stroke: {
|
|
2305
2318
|
default: "#262B39",
|
|
2306
2319
|
}};
|
|
@@ -3151,12 +3164,12 @@ const BordNavigationIcon = (props) => {
|
|
|
3151
3164
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: jsx("path", { stroke: stroke || bordColorTheme.navyBlue[400], strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m3 11 19-9-9 19-2-8-8-2Z" }) }));
|
|
3152
3165
|
};
|
|
3153
3166
|
|
|
3154
|
-
const BordNotificationOffIcon = (props) => {
|
|
3167
|
+
const BordNotificationOffIcon$1 = (props) => {
|
|
3155
3168
|
const { stroke } = props;
|
|
3156
3169
|
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("g", { clipPath: "url(#a)", children: jsx("path", { stroke: stroke || bordColorTheme.navyBlue[400], strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.73 21c-.1758.3031-.4282.5547-.7318.7295-.3036.1749-.6478.267-.9982.267-.3504 0-.6946-.0921-.9982-.267-.3036-.1748-.556-.4264-.7318-.7295m8.36-8c-.4449-1.6286-.657-3.31196-.63-5 .0016-1.08694-.2921-2.15389-.8497-3.08691-.5576-.93301-1.3581-1.69703-2.3162-2.21045-.958-.51342-2.0375-.75695-3.1232-.70457C10.6252 2.05044 9.57417 2.39675 8.67 3M6.26 6.26C6.08627 6.82361 5.99861 7.41022 6 8c0 7-3 9-3 9h14M1 1l22 22" }) }), jsx("defs", { children: jsx("clipPath", { id: "a", children: jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
|
|
3157
3170
|
};
|
|
3158
3171
|
|
|
3159
|
-
const BordNotificationIcon = (props) => {
|
|
3172
|
+
const BordNotificationIcon$1 = (props) => {
|
|
3160
3173
|
const { stroke } = props;
|
|
3161
3174
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: jsx("path", { stroke: stroke || bordColorTheme.navyBlue[400], strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.73 21c-.1758.3031-.4282.5547-.7318.7295-.3036.1749-.6478.267-.9982.267-.3504 0-.6946-.0921-.9982-.267-.3036-.1748-.556-.4264-.7318-.7295M18 8c0-1.5913-.6321-3.11742-1.7574-4.24264C15.1174 2.63214 13.5913 2 12 2c-1.5913 0-3.11742.63214-4.24264 1.75736C6.63214 4.88258 6 6.4087 6 8c0 7-3 9-3 9h18s-3-2-3-9Z" }) }));
|
|
3162
3175
|
};
|
|
@@ -3948,8 +3961,8 @@ const listOfBordOneToneIcons = {
|
|
|
3948
3961
|
music: BordMusicIcon,
|
|
3949
3962
|
navigation2: BordNavigation2Icon,
|
|
3950
3963
|
navigation: BordNavigationIcon,
|
|
3951
|
-
notificationOff: BordNotificationOffIcon,
|
|
3952
|
-
notification: BordNotificationIcon,
|
|
3964
|
+
notificationOff: BordNotificationOffIcon$1,
|
|
3965
|
+
notification: BordNotificationIcon$1,
|
|
3953
3966
|
octagon: BordOctagonIcon,
|
|
3954
3967
|
package: BordPackageIcon,
|
|
3955
3968
|
paperclip: BordPaperclipIcon,
|
|
@@ -4115,8 +4128,8 @@ function styleInject(css, ref) {
|
|
|
4115
4128
|
}
|
|
4116
4129
|
}
|
|
4117
4130
|
|
|
4118
|
-
var css_248z$
|
|
4119
|
-
styleInject(css_248z$
|
|
4131
|
+
var css_248z$16 = ".bordTextInputDS .labelSkeletonLoader,.bordTextInputDS label,.bordTextInputSkeletonLoader .labelSkeletonLoader,.bordTextInputSkeletonLoader label{color:var(--ds-c-content-default);display:block;font-size:1.2rem;line-height:1.5rem;margin-bottom:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordTextInputDS .inputContainer,.bordTextInputDS .inputSkeletonLoader,.bordTextInputSkeletonLoader .inputContainer,.bordTextInputSkeletonLoader .inputSkeletonLoader{align-items:center;background-color:transparent;border-color:var(--ds-c-stroke-default);border-radius:.6rem;border-style:solid;border-width:1px;display:flex;font-size:1.4rem;height:4rem;line-height:1.8rem;padding-left:1.6rem;padding-right:1.6rem}.bordTextInputDS .inputContainer .bordOneToneIcon,.bordTextInputDS .inputSkeletonLoader .bordOneToneIcon,.bordTextInputSkeletonLoader .inputContainer .bordOneToneIcon,.bordTextInputSkeletonLoader .inputSkeletonLoader .bordOneToneIcon{margin-right:.8rem}.bordTextInputDS .inputContainer .bordOneToneIcon svg path,.bordTextInputDS .inputSkeletonLoader .bordOneToneIcon svg path,.bordTextInputSkeletonLoader .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader .inputSkeletonLoader .bordOneToneIcon svg path{stroke:var(--ds-c-content-secondary)}.bordTextInputDS .inputContainer .passwordToggle,.bordTextInputDS .inputSkeletonLoader .passwordToggle,.bordTextInputSkeletonLoader .inputContainer .passwordToggle,.bordTextInputSkeletonLoader .inputSkeletonLoader .passwordToggle{cursor:pointer}.bordTextInputDS .inputContainer input,.bordTextInputDS .inputSkeletonLoader input,.bordTextInputSkeletonLoader .inputContainer input,.bordTextInputSkeletonLoader .inputSkeletonLoader input{background-color:transparent;color:var(--ds-c-content-secondary);height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bordTextInputDS .inputContainer input:focus,.bordTextInputDS .inputSkeletonLoader input:focus,.bordTextInputSkeletonLoader .inputContainer input:focus,.bordTextInputSkeletonLoader .inputSkeletonLoader input:focus{outline:2px solid transparent;outline-offset:2px}.bordTextInputDS .inputContainer input::-moz-placeholder,.bordTextInputDS .inputSkeletonLoader input::-moz-placeholder,.bordTextInputSkeletonLoader .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader .inputSkeletonLoader input::-moz-placeholder{color:var(--ds-c-content-secondary)}.bordTextInputDS .inputContainer input::placeholder,.bordTextInputDS .inputSkeletonLoader input::placeholder,.bordTextInputSkeletonLoader .inputContainer input::placeholder,.bordTextInputSkeletonLoader .inputSkeletonLoader input::placeholder{color:var(--ds-c-content-secondary)}.bordTextInputDS .caption,.bordTextInputSkeletonLoader .caption{color:var(--ds-c-content-secondary);font-size:1rem;line-height:1.3rem;margin-top:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordTextInputDS .errorText,.bordTextInputSkeletonLoader .errorText{color:var(--ds-c-bool-danger-fg);margin-top:.4rem}.bordTextInputDS.filled .inputContainer,.bordTextInputSkeletonLoader.filled .inputContainer{border-color:var(--ds-c-stroke-interactive)}.bordTextInputDS.filled .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.filled .inputContainer .bordOneToneIcon svg path{stroke:var(--ds-c-content-default)}.bordTextInputDS.filled .inputContainer input,.bordTextInputSkeletonLoader.filled .inputContainer input{color:var(--ds-c-content-default)}.bordTextInputDS:hover .inputContainer,.bordTextInputSkeletonLoader:hover .inputContainer{border-color:var(--ds-c-stroke-interactive)}.bordTextInputDS:hover .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader:hover .inputContainer .bordOneToneIcon svg path{stroke:var(--ds-c-content-default)}.bordTextInputDS:hover .inputContainer input,.bordTextInputSkeletonLoader:hover .inputContainer input{color:var(--ds-c-content-default)}.bordTextInputDS:hover .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input::-moz-placeholder{color:var(--ds-c-content-secondary)}.bordTextInputDS:hover .inputContainer input::placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input::placeholder{color:var(--ds-c-content-secondary)}.bordTextInputDS:hover .inputContainer input:focus::-moz-placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input:focus::-moz-placeholder{color:var(--ds-c-content-secondary)}.bordTextInputDS:hover .inputContainer input:focus::placeholder,.bordTextInputSkeletonLoader:hover .inputContainer input:focus::placeholder{color:var(--ds-c-content-secondary)}.bordTextInputDS.focused .inputContainer,.bordTextInputSkeletonLoader.focused .inputContainer{border-color:var(--ds-c-primary-bg-default)}.bordTextInputDS.focused .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.focused .inputContainer .bordOneToneIcon svg path{stroke:var(--ds-c-content-default)}.bordTextInputDS.error label,.bordTextInputSkeletonLoader.error label{color:var(--ds-c-bool-danger-fg)}.bordTextInputDS.error .inputContainer,.bordTextInputSkeletonLoader.error .inputContainer{border-color:var(--ds-c-bool-danger-fg)}.bordTextInputDS.error .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.error .inputContainer .bordOneToneIcon svg path{stroke:var(--ds-c-bool-danger-fg)}.bordTextInputDS.error .inputContainer input,.bordTextInputSkeletonLoader.error .inputContainer input{color:var(--ds-c-bool-danger-fg)}.bordTextInputDS.error .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader.error .inputContainer input::-moz-placeholder{color:var(--ds-c-bool-danger-fg)}.bordTextInputDS.error .inputContainer input::placeholder,.bordTextInputSkeletonLoader.error .inputContainer input::placeholder{color:var(--ds-c-bool-danger-fg)}.bordTextInputDS.disabled,.bordTextInputSkeletonLoader.disabled{cursor:not-allowed}.bordTextInputDS.disabled label,.bordTextInputSkeletonLoader.disabled label{color:var(--ds-c-bool-disabled-sec-fg);cursor:not-allowed}.bordTextInputDS.disabled .inputContainer,.bordTextInputSkeletonLoader.disabled .inputContainer{background-color:var(--ds-c-bool-disabled-sec-bg);border-color:var(--ds-c-stroke-default)}.bordTextInputDS.disabled .inputContainer .bordOneToneIcon svg path,.bordTextInputSkeletonLoader.disabled .inputContainer .bordOneToneIcon svg path{stroke:var(--ds-c-bool-disabled-sec-fg)}.bordTextInputDS.disabled .inputContainer input,.bordTextInputSkeletonLoader.disabled .inputContainer input{color:var(--ds-c-bool-disabled-sec-fg);cursor:not-allowed}.bordTextInputDS.disabled .inputContainer input::-moz-placeholder,.bordTextInputSkeletonLoader.disabled .inputContainer input::-moz-placeholder{color:var(--ds-c-bool-disabled-sec-fg)}.bordTextInputDS.disabled .inputContainer input::placeholder,.bordTextInputSkeletonLoader.disabled .inputContainer input::placeholder{color:var(--ds-c-bool-disabled-sec-fg)}.bordTextInputDS.disabled .inputContainer .passwordToggle,.bordTextInputSkeletonLoader.disabled .inputContainer .passwordToggle{cursor:not-allowed}.bordTextInputDS.disabled .caption,.bordTextInputDS.disabled .errorText,.bordTextInputSkeletonLoader.disabled .caption,.bordTextInputSkeletonLoader.disabled .errorText{color:var(--ds-c-bool-disabled-sec-fg)}.bordTextInputSkeletonLoader .labelSkeletonLoader{border-radius:.4rem;height:1.4rem;width:66.666667%}.bordTextInputSkeletonLoader .inputSkeletonLoader{border-style:none}";
|
|
4132
|
+
styleInject(css_248z$16);
|
|
4120
4133
|
|
|
4121
4134
|
const BordTextInput = ({ placeholder, currentText = '', setCurrentText, standardSize = FORM_COMPONENTS_STANDARD_SIZES.MD, label, caption, className = '', isFilled, style, inputProps, labelProps, leftIconVariant, errorText = '', disabled, showSkeletonLoader = false, autoComplete = 'off', hideErrorText, handleBlur, setIsPassword, isPassword, showPasswordIcon, }) => {
|
|
4122
4135
|
const [inputValue, setInputValue] = useState('');
|
|
@@ -4337,8 +4350,8 @@ const BordTwoToneIcon = ({ variant, standardSize = 24, customWidth, colorTones,
|
|
|
4337
4350
|
return (jsx("div", { className: "bordTwoToneIcon", style: { width: iconWidth }, children: React.createElement(twoToneIcon, { colorTones }) }));
|
|
4338
4351
|
};
|
|
4339
4352
|
|
|
4340
|
-
var css_248z$
|
|
4341
|
-
styleInject(css_248z$
|
|
4353
|
+
var css_248z$15 = ".bordBackButtonDS{align-items:center;cursor:pointer;display:flex;gap:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordBackButtonDS .buttonText{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.2rem;line-height:1.6rem}";
|
|
4354
|
+
styleInject(css_248z$15);
|
|
4342
4355
|
|
|
4343
4356
|
/**
|
|
4344
4357
|
* @param {IBordBackButtonProps} props - The properties for the BordBackButton component.
|
|
@@ -4350,8 +4363,8 @@ const BordBackButton = ({ buttonText, onClick, ...rest }) => {
|
|
|
4350
4363
|
return (jsxs("div", { className: "bordBackButtonDS", onClick: onClick, ...rest, children: [jsx(BordOneToneIcon, { variant: "arrowHeadLeft", customWidth: "1.2rem" }), jsx("div", { className: "buttonText", children: buttonText })] }));
|
|
4351
4364
|
};
|
|
4352
4365
|
|
|
4353
|
-
var css_248z$
|
|
4354
|
-
styleInject(css_248z$
|
|
4366
|
+
var css_248z$14 = "@keyframes sonarPulse{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}.bordAttentionButtonDS{align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative}.bordAttentionButtonDS .attentionDot{background-color:#fc3d5f;border-radius:15998.4rem;height:1.2rem;position:relative;width:1.2rem;z-index:2}.bordAttentionButtonDS .attentionDot.active:after,.bordAttentionButtonDS .attentionDot.active:before{animation:sonarPulse 2s ease-out infinite;background-color:#fc3d5f;border-radius:50%;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.bordAttentionButtonDS .attentionDot.active:after{animation-delay:1s}";
|
|
4367
|
+
styleInject(css_248z$14);
|
|
4355
4368
|
|
|
4356
4369
|
/**
|
|
4357
4370
|
* @description A component that displays a pulsating red attention indicator dot.
|
|
@@ -4364,8 +4377,8 @@ const BordAttentionButton = (props) => {
|
|
|
4364
4377
|
return (jsx("div", { className: `bordAttentionButtonDS ${customClassName}`, ...restProps, children: jsx("div", { className: `attentionDot ${isInactive ? '' : 'active'}` }) }));
|
|
4365
4378
|
};
|
|
4366
4379
|
|
|
4367
|
-
var css_248z$
|
|
4368
|
-
styleInject(css_248z$
|
|
4380
|
+
var css_248z$13 = ".bordInfoBanner{align-items:center;border-radius:.6rem;display:flex;font-size:1.2rem;padding:1.2rem 1.6rem;width:-moz-fit-content;width:fit-content}.bordInfoBanner.withBackground{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity))}.bordInfoBanner .infoBannerContent{align-items:center;color:var(--ds-c-content-secondary);display:flex;flex-wrap:wrap}.bordInfoBanner .infoBannerContent .infoBannerIcon{align-items:center;display:flex;justify-content:center}.bordInfoBanner .infoBannerContent .infoBannerIcon path{stroke:currentColor}.bordInfoBanner .infoBannerContent .infoBannerTexts{align-items:center;display:flex;gap:.8rem;margin-left:5px}.bordInfoBanner .infoBannerContent .infoBannerTexts .infoBannerPrimaryText{font-weight:400;white-space:nowrap}.bordInfoBanner .infoBannerContent .infoBannerTexts .infoBannerRangeText{font-weight:700;white-space:nowrap}.bordInfoBanner .infoBannerContent .infoBannerDivider{background-color:var(--ds-c-stroke-default);border-radius:15998.4rem;height:2rem;margin-left:16px;margin-right:16px;width:.1rem}.bordInfoBanner .infoBannerContent .infoBannerAlert{align-items:center;display:flex;gap:.8rem}.bordInfoBanner .infoBannerContent .infoBannerAlert .alertLabel{margin-left:8px}@media (max-width:640px){.bordInfoBanner{width:100%}.bordInfoBanner .infoBannerContent{align-items:flex-start;flex-wrap:wrap;gap:8px}.bordInfoBanner .infoBannerContent .infoBannerIcon,.bordInfoBanner .infoBannerContent .infoBannerTexts{flex-shrink:0}.bordInfoBanner .infoBannerContent .infoBannerDivider{display:none}.bordInfoBanner .infoBannerContent .infoBannerAlert{flex-basis:100%;justify-content:flex-start;width:100%}}";
|
|
4381
|
+
styleInject(css_248z$13);
|
|
4369
4382
|
|
|
4370
4383
|
/**
|
|
4371
4384
|
* @description An informational banner component with icon, text, and optional alert indicator.
|
|
@@ -4397,8 +4410,8 @@ const BordInfoBanner = (props) => {
|
|
|
4397
4410
|
return (jsx("div", { className: `bordInfoBanner ${backgroundClass} ${customClassName}`, ...bordInfoBannerContainerProps, ...restProps, children: jsxs("div", { className: "infoBannerContent", ...bordInfoBannerContentProps, children: [jsx("div", { className: "infoBannerIcon", ...bordInfoBannerIconContainerProps, children: jsx(BordOneToneIcon, { ...bordOneToneIconProps }) }), jsxs("div", { className: "infoBannerTexts", ...bordInfoBannerTextsContainerProps, children: [primaryText && (jsx("span", { className: "infoBannerPrimaryText", ...bordInfoBannerPrimaryTextProps, children: primaryText })), rangeText && (jsx("span", { className: "infoBannerRangeText", ...bordInfoBannerRangeTextProps, children: rangeText }))] }), alertLabel && (jsxs(Fragment, { children: [jsx("div", { className: "infoBannerDivider", ...bordInfoBannerDividerProps }), jsxs("div", { className: "infoBannerAlert", ...bordInfoBannerAlertContainerProps, children: [jsx(BordAttentionButton, { isInactive: isAlertInactive }), jsx("span", { className: "alertLabel", ...bordInfoBannerAlertLabelProps, children: alertLabel })] })] }))] }) }));
|
|
4398
4411
|
};
|
|
4399
4412
|
|
|
4400
|
-
var css_248z$
|
|
4401
|
-
styleInject(css_248z$
|
|
4413
|
+
var css_248z$12 = ".bordButtonDS{align-items:center;border-radius:.6rem;border-style:none;color:var(--ds-c-primary-fg-default);display:flex;gap:.8rem;justify-content:center}.bordButtonDS.ht-42{height:4.2rem}.bordButtonDS.rectangular{padding:1.2rem .8rem}.bordButtonDS.squared{padding:.8rem}.bordButtonDS .bordOneToneIcon>svg>path{stroke:currentColor}.bordButtonDS.primary{background-color:var(--ds-c-primary-bg-default)}.bordButtonDS.primary .textContainer{font-size:1.4rem;font-weight:500;line-height:1.823rem}.bordButtonDS.primary:hover{background-color:var(--ds-c-primary-bg-hover);color:var(--ds-c-primary-fg-default)}.bordButtonDS.primary:disabled{background-color:var(--ds-c-bool-disabled-bg);cursor:not-allowed}.bordButtonDS.primary:disabled .textContainer{color:var(--ds-c-bool-disabled-fg)}.bordButtonDS.primary:disabled .bordOneToneIcon>svg>path{stroke:var(--ds-c-bool-disabled-fg)}.bordButtonDS.primary.bordButtonOutlined{background-color:transparent;border-color:var(--ds-c-primary-bg-default);border-style:solid;border-width:1px}.bordButtonDS.primary.bordButtonOutlined .textContainer{color:var(--ds-c-primary-bg-default)}.bordButtonDS.primary.bordButtonOutlined .bordOneToneIcon>svg>path{stroke:var(--ds-c-primary-bg-default)}.bordButtonDS.primary.bordButtonOutlined:hover{background-color:var(--ds-c-primary-bg-secondary)}.bordButtonDS.primary.bordButtonOutlined:disabled{border-color:var(--ds-c-bool-disabled-sec-fg)}.bordButtonDS.primary.bordButtonOutlined:disabled .textContainer{color:var(--ds-c-bool-disabled-sec-fg)}.bordButtonDS.primary.bordButtonOutlined:disabled .bordOneToneIcon>svg>path{stroke:var(--ds-c-bool-disabled-sec-fg)}.bordButtonDS.secondary{background-color:var(--ds-c-secondary-bg-default)}.bordButtonDS.secondary .textContainer{color:var(--ds-c-content-secondary);font-size:1.4rem;font-weight:500;line-height:1.823rem}.bordButtonDS.secondary:hover .textContainer{color:var(--ds-c-content-default)}.bordButtonDS.secondary:hover .bordOneToneIcon>svg>path{stroke:var(--ds-c-content-default)}.bordButtonDS.secondary:disabled .textContainer{color:var(--ds-c-bool-disabled-fg)}.bordButtonDS.secondary:disabled .bordOneToneIcon>svg>path{stroke:var(--ds-c-bool-disabled-fg)}.bordButtonDS.secondary.bordButtonOutlined{background-color:transparent;border-color:var(--ds-c-stroke-default);border-style:solid;border-width:1px}.bordButtonDS.secondary.bordButtonOutlined .textContainer{color:var(--ds-c-content-secondary)}.bordButtonDS.secondary.bordButtonOutlined:hover{border-color:var(--ds-c-stroke-interactive)}.bordButtonDS.secondary.bordButtonOutlined:hover .textContainer{color:var(--ds-c-content-default)}.bordButtonDS.secondary.bordButtonOutlined:disabled{border-color:var(--ds-c-bool-disabled-bg)}.bordButtonDS.secondary.bordButtonOutlined:disabled .textContainer{color:var(--ds-c-bool-disabled-fg)}.bordButtonDS.tertiary{background-color:transparent;border-color:var(--ds-c-stroke-default);border-style:solid;border-width:1px}.bordButtonDS.tertiary .textContainer{color:var(--ds-c-content-secondary);font-size:1.2rem;font-weight:500;line-height:1.562rem}.bordButtonDS.tertiary:hover .textContainer{color:var(--ds-c-content-default)}.bordButtonDS.tertiary:hover .bordOneToneIcon>svg>path{stroke:var(--ds-c-content-default)}.bordButtonDS.tertiary:disabled .textContainer{color:var(--ds-c-bool-disabled-fg)}.bordButtonDS.tertiary .bordOneToneIcon>svg>path{stroke:var(--ds-c-content-secondary)}.bordButtonDS.danger{background-color:var(--ds-c-bool-danger-fg)}.bordButtonDS.danger .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.4rem;font-weight:500;line-height:1.823rem}.bordButtonDS.danger:hover{opacity:.9}.bordButtonDS.danger:hover .textContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordButtonDS.danger:disabled{background-color:var(--ds-c-bool-disabled-bg);cursor:not-allowed}.bordButtonDS.danger:disabled .textContainer{color:var(--ds-c-bool-disabled-fg)}.bordButtonDS.danger:disabled .bordOneToneIcon>svg>path{stroke:var(--ds-c-bool-disabled-fg)}.bordButtonDS.danger.bordButtonOutlined{background-color:var(--ds-c-bool-danger-bg-op);border-color:var(--ds-c-bool-danger-fg);border-style:solid;border-width:1px}.bordButtonDS.danger.bordButtonOutlined .textContainer{color:var(--ds-c-bool-danger-fg)}.bordButtonDS.danger.bordButtonOutlined .bordOneToneIcon>svg>path{stroke:var(--ds-c-bool-danger-fg)}.bordButtonDS.danger.bordButtonOutlined:hover{opacity:.9}.bordButtonDS.danger.bordButtonOutlined:disabled{background-color:transparent;border-color:var(--ds-c-bool-disabled-bg)}.bordButtonDS.danger.bordButtonOutlined:disabled .textContainer{color:var(--ds-c-bool-disabled-fg)}.bordButtonDS.danger.bordButtonOutlined:disabled .bordOneToneIcon>svg>path{stroke:var(--ds-c-bool-disabled-fg)}.bordButtonSkeletonLoader{background-color:var(--ds-c-stroke-default);border-radius:.6rem;height:4.2rem;pointer-events:none}";
|
|
4414
|
+
styleInject(css_248z$12);
|
|
4402
4415
|
|
|
4403
4416
|
/**
|
|
4404
4417
|
* @description A button component with different styles and loading state.
|
|
@@ -4438,8 +4451,8 @@ const BordButton = (props) => {
|
|
|
4438
4451
|
return (jsxs("button", { className: `bordButtonDS ${customClassName} ${standardPaddingSize} ${buttonOutlineStyle} ${customWidth} ${customHeightStyle} ${styleModeButton}`, form: formId, onClick: onClick, disabled: disabled, ...restProps, children: [buttonIconOneProps && buttonIconOne && jsx(BordOneToneIcon, { ...buttonIconOneProps, variant: buttonIconOne }), label && (jsx("div", { className: "textContainer", style: { fontSize: customFontSize }, children: label })), buttonIconTwoProps && buttonIconTwo && jsx(BordOneToneIcon, { ...buttonIconTwoProps, variant: buttonIconTwo })] }));
|
|
4439
4452
|
};
|
|
4440
4453
|
|
|
4441
|
-
var css_248z$
|
|
4442
|
-
styleInject(css_248z$
|
|
4454
|
+
var css_248z$11 = ".bordTabsDS{border-bottom-width:1px;border-color:var(--ds-c-stroke-default);display:flex}";
|
|
4455
|
+
styleInject(css_248z$11);
|
|
4443
4456
|
|
|
4444
4457
|
const TabsContext = createContext({
|
|
4445
4458
|
activeTab: undefined,
|
|
@@ -4454,8 +4467,8 @@ const BordTabs = ({ value, children, defaultValue, textColor, onChange }) => {
|
|
|
4454
4467
|
return (jsx(TabsContext.Provider, { value: { activeTab: value ?? activeTab, textColor, setActiveTab: handleSetActive }, children: jsx("div", { className: "bordTabsDS", children: children }) }));
|
|
4455
4468
|
};
|
|
4456
4469
|
|
|
4457
|
-
var css_248z$
|
|
4458
|
-
styleInject(css_248z$
|
|
4470
|
+
var css_248z$10 = ".bordCellHeader{align-items:flex-start;display:flex;gap:1.2rem}.bordCellHeader .cellHeaderIcon{align-items:center;display:flex;font-size:2.4rem;justify-content:center;line-height:3.2rem}.bordCellHeader .cellHeaderContent{display:flex;flex-direction:column;gap:.4rem}.bordCellHeader .cellHeaderContent .cellHeaderTitleContainer{align-items:center;color:var(--ds-c-content-default);display:flex;font-size:16px;font-weight:700;gap:.8rem}.bordCellHeader .cellHeaderContent .cellHeaderSubtitleContainer{color:var(--ds-c-content-default)}.bordCellHeader .cellHeaderContent .cellHeaderSubtitleContainer .cellHeaderTitle{font-size:16px;font-weight:700}.bordCellHeader .cellHeaderContent .cellHeaderSubtitleContainer .cellHeaderSubtitle{font-size:1.4rem;font-weight:400;line-height:2rem}@media (max-width:640px){.bordCellHeader .cellHeaderContent .cellHeaderSubtitleContainer{align-items:center;display:flex;gap:8px}}.bordCellHeader .cellHeaderContent .cellHeaderDescription{font-size:1.2rem;font-weight:400;line-height:1.6rem}";
|
|
4471
|
+
styleInject(css_248z$10);
|
|
4459
4472
|
|
|
4460
4473
|
/**
|
|
4461
4474
|
* @description A cell header component with icon, title, subtitle and description.
|
|
@@ -4471,8 +4484,8 @@ const BordCellHeader = (props) => {
|
|
|
4471
4484
|
return (jsx("div", { className: `bordCellHeader ${customClassName}`, ...restProps, children: jsxs("div", { className: "cellHeaderContent", children: [jsxs("div", { className: "cellHeaderTitleContainer", children: [icon && jsx("div", { className: "cellHeaderIcon", children: icon }), jsx("div", { className: "cellHeaderTitle", children: title })] }), jsxs("div", { className: "cellHeaderSubtitleContainer", children: [subtitle && jsx("div", { className: "cellHeaderSubtitle", children: subtitle }), description && jsx("div", { className: "cellHeaderDescription", children: description })] })] }) }));
|
|
4472
4485
|
};
|
|
4473
4486
|
|
|
4474
|
-
var css_248z
|
|
4475
|
-
styleInject(css_248z
|
|
4487
|
+
var css_248z$$ = ".bordCellItem{display:flex;flex-direction:column;max-width:104px;min-width:104px}.bordCellItem .cellItemTitle{color:var(--ds-c-content-secondary);font-size:1.2rem;font-weight:400;line-height:1.6rem;margin-bottom:.8rem}.bordCellItem .cellItemContent{align-items:center;color:var(--ds-c-content-default);display:flex;gap:.8rem}.bordCellItem .cellItemContent .cellItemIcon{align-items:center;display:flex;font-size:1.6rem;justify-content:center;line-height:2.4rem}.bordCellItem .cellItemContent .cellItemLabel{font-size:1.2rem;font-weight:400;line-height:1.6rem}@media (max-width:640px){.bordCellItem{align-items:center;flex-direction:row;justify-content:space-between;max-width:100%;min-width:100%}.bordCellItem .cellItemTitle{margin-bottom:0}.bordCellItem .cellItemContent{align-items:center;display:flex;gap:.8rem}}";
|
|
4488
|
+
styleInject(css_248z$$);
|
|
4476
4489
|
|
|
4477
4490
|
/**
|
|
4478
4491
|
* @description A cell item component with optional title, icon and label.
|
|
@@ -4595,8 +4608,8 @@ function getViewportInfo(width, height) {
|
|
|
4595
4608
|
};
|
|
4596
4609
|
}
|
|
4597
4610
|
|
|
4598
|
-
var css_248z$
|
|
4599
|
-
styleInject(css_248z$
|
|
4611
|
+
var css_248z$_ = ".bordBadgeDS{border-radius:2.4rem;color:var(--ds-c-content-default);width:-moz-max-content;width:max-content}.bordBadgeDS.defaultStyles{background-color:var(--ds-c-layout-l1);padding:.4rem .8rem}.bordBadgeDS.outlined{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-interactive);border-width:1px;padding:.4rem .6rem}.bordBadgeDS.outlined.informativeBordBadge{border-color:var(--ds-c-bool-info-fg)}.bordBadgeDS.outlined.successBordBadge{border-color:var(--ds-c-bool-success-fg)}.bordBadgeDS.outlined.warningBordBadge{border-color:var(--ds-c-bool-warning-fg)}.bordBadgeDS.gradientStyles{--tw-gradient-from:#22cfab var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,207,171,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#0057a7 var(--tw-gradient-to-position);background-image:linear-gradient(to right,var(--tw-gradient-stops));padding:.1rem}.bordBadgeDS.small.defaultStyles,.bordBadgeDS.small.outlined{border-width:1px;padding:0 .6rem}.bordBadgeDS.small .gradientComponentStyles{padding:0 .6rem}.bordBadgeDS .gradientComponentStyles{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:2.4rem;height:100%;padding:.4rem .8rem;position:relative;width:100%}.bordBadgeDS .gradientComponentStyles:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(28 50 59/var(--tw-bg-opacity))}.bordBadgeDS .gradientComponentStyles:where([data-theme=dark],[data-theme=dark] *):before{content:var(--tw-content);display:none}.bordBadgeDS .gradientComponentStyles:before{--tw-content:\"\";background-color:var(--ds-c-primary-bg-secondary);border-radius:2.4rem;content:var(--tw-content);height:100%;inset:0;position:absolute;width:100%}.bordBadgeDS.bordBadge{display:flex;flex-direction:column;font-size:12px;height:24px;justify-content:center;min-width:24px;text-align:center}.bordBadgeDS.defaultBordBadge{--tw-border-opacity:1;--tw-text-opacity:1;background-color:transparent;border-color:rgb(230 230 230/var(--tw-border-opacity));border-width:1px;color:rgb(198 199 203/var(--tw-text-opacity))}.bordBadgeDS.informativeBordBadge{background-color:var(--ds-c-bool-info-bg);color:var(--ds-c-bool-info-fg)}.bordBadgeDS.informativeBordBadge.filled{--tw-text-opacity:1;background-color:var(--ds-c-bool-info-fg);color:rgb(255 255 255/var(--tw-text-opacity))}.bordBadgeDS.informativeBordBadge.disabled{--tw-text-opacity:1;background-color:var(--ds-c-bool-disabled-sec-bg);color:rgb(180 180 180/var(--tw-text-opacity))}.bordBadgeDS.successBordBadge{background-color:var(--ds-c-bool-success-bg);color:var(--ds-c-bool-success-fg)}.bordBadgeDS.successBordBadge.filled{--tw-text-opacity:1;background-color:var(--ds-c-bool-success-fg);color:rgb(255 255 255/var(--tw-text-opacity))}.bordBadgeDS.successBordBadge.disabled{background-color:var(--ds-c-bool-disabled-sec-bg);color:var(--ds-c-bool-disabled-sec-fg)}.bordBadgeDS.warningBordBadge{background-color:var(--ds-c-bool-warning-bg-op);color:var(--ds-c-bool-warning-fg)}.bordBadgeDS.warningBordBadge.filled{--tw-text-opacity:1;background-color:var(--ds-c-bool-warning-fg);color:rgb(255 255 255/var(--tw-text-opacity))}.bordBadgeDS.warningBordBadge.disabled{background-color:var(--ds-c-bool-disabled-sec-bg);color:var(--ds-c-bool-disabled-sec-fg)}.bordBadgeDS.dangerBordBadge{background-color:var(--ds-c-bool-danger-bg-op);color:var(--ds-c-bool-danger-fg)}.bordBadgeDS.dangerBordBadge.filled{--tw-text-opacity:1;background-color:var(--ds-c-bool-danger-fg);color:rgb(255 255 255/var(--tw-text-opacity))}.bordBadgeDS.dangerBordBadge.disabled{background-color:var(--ds-c-bool-disabled-sec-bg);color:var(--ds-c-bool-disabled-sec-fg)}";
|
|
4612
|
+
styleInject(css_248z$_);
|
|
4600
4613
|
|
|
4601
4614
|
var BADGE_VARIANTS;
|
|
4602
4615
|
(function (BADGE_VARIANTS) {
|
|
@@ -4622,8 +4635,8 @@ const BordBadge = ({ label = 'Label', variant = 'default', color, className = ''
|
|
|
4622
4635
|
return (jsx(Fragment, { children: jsx("div", { className: `bordBadgeDS ${renderVariants[variant]?.styles} ${className} ${size} ${color ? `bordBadge ${color}BordBadge ${filled ? 'filled' : ''}` : ''} ${disabled ? 'disabled' : ''}`, ...restProps, children: renderVariants[variant]?.component }) }));
|
|
4623
4636
|
};
|
|
4624
4637
|
|
|
4625
|
-
var css_248z$
|
|
4626
|
-
styleInject(css_248z$
|
|
4638
|
+
var css_248z$Z = ".bordTrelloRowFooterTagList{align-items:center;border-top-width:1px;display:flex;padding-top:12px}.bordTrelloRowFooterTagList.mobile{align-items:flex-start;justify-content:flex-start}.bordTrelloRowFooterTagList.mobile .bordTrelloRowFooterTagListTitle{color:#00b188}.bordTrelloRowFooterTagList.mobile .bordTrelloRowFooterTagListTitle .bordOneToneIcon svg path{stroke:#00b188}.bordTrelloRowFooterTagList.mobile .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleText{color:#00b188}.bordTrelloRowFooterTagList.mobile .bordTrelloRowFooterTagListTitle.clickable{cursor:pointer;transition:opacity .2s ease}.bordTrelloRowFooterTagList.mobile .bordTrelloRowFooterTagListTitle.clickable:hover{opacity:.75}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle{--tw-text-opacity:1;align-items:center;color:rgb(111 115 125/var(--tw-text-opacity));display:flex;font-size:1.4rem;gap:4px;line-height:2rem}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleIcon{width:12px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleText{text-wrap:nowrap;font-size:12px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeList{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-left:8px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel{--tw-text-opacity:1;align-items:center;color:rgb(7 15 33/var(--tw-text-opacity));display:flex;gap:4px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelIcon{width:9px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelIcon svg path{stroke:#070f21}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelContent{align-items:center;display:flex;gap:4px}.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelText,.bordTrelloRowFooterTagList .bordTrelloRowFooterTagListBadgeLabel .bordTrelloRowFooterTagListBadgeLabelTitle{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:10px}.bordTrelloRowFooterTagListModal .modalOverlay{--tw-bg-opacity:0.5;background-color:rgb(0 0 0/var(--tw-bg-opacity));inset:0;position:fixed;z-index:9998}.bordTrelloRowFooterTagListModal .modalContent{--tw-bg-opacity:1;animation:slideUp .3s ease-out;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-top-left-radius:20px;border-top-right-radius:20px;bottom:0;display:flex;flex-direction:column;left:0;max-height:80vh;position:fixed;right:0;z-index:9999}.bordTrelloRowFooterTagListModal .modalContent .modalHeader{align-items:center;border-bottom-width:1px;border-color:#e5e5e5;display:flex;justify-content:space-between;padding:16px 24px}.bordTrelloRowFooterTagListModal .modalContent .modalHeader .bordTrelloRowFooterTagListTitle{align-items:center;display:flex;gap:8px}.bordTrelloRowFooterTagListModal .modalContent .modalHeader .bordTrelloRowFooterTagListTitle .bordOneToneIcon svg path{stroke:#6f737d}.bordTrelloRowFooterTagListModal .modalContent .modalHeader .bordTrelloRowFooterTagListTitle .bordTrelloRowFooterTagListTitleText{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));font-size:12px;font-weight:500}.bordTrelloRowFooterTagListModal .modalContent .modalHeader .modalCloseButton{align-items:center;background-color:transparent;border-radius:15998.4rem;border-style:none;cursor:pointer;display:flex;height:32px;justify-content:center;transition:background-color .2s ease;width:32px}.bordTrelloRowFooterTagListModal .modalContent .modalHeader .modalCloseButton:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bordTrelloRowFooterTagListModal .modalContent .modalHeader .modalCloseButton svg path{stroke:#070f21}.bordTrelloRowFooterTagListModal .modalContent .modalBody{flex:1 1 0%;overflow-y:auto;padding:8px 24px}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem{align-items:center;display:flex;gap:8px;padding-bottom:12px;padding-top:12px}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem:not(:last-child){border-bottom-width:1px;border-color:#e5e5e5}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem .bordOneToneIcon{flex-shrink:0}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem .bordOneToneIcon svg path{stroke:#070f21}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem .modalBadgeContent{align-items:center;display:flex;flex:1 1 0%;gap:4px}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem .modalBadgeContent .modalBadgeTitle{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:12px;font-weight:400}.bordTrelloRowFooterTagListModal .modalContent .modalBody .modalBadgeItem .modalBadgeContent .modalBadgeText{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));font-size:12px;font-weight:400}.bordTrelloRowFooterTagListModal .modalContent .modalCloseBottomButton{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:#e5e5e5;border-top-width:1px;color:rgb(7 15 33/var(--tw-text-opacity));cursor:pointer;font-size:16px;font-weight:500;padding-bottom:16px;padding-top:16px;transition:background-color .2s ease;width:100%}.bordTrelloRowFooterTagListModal .modalContent .modalCloseBottomButton:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}";
|
|
4639
|
+
styleInject(css_248z$Z);
|
|
4627
4640
|
|
|
4628
4641
|
const BordTrelloRowFooterBadgeList = ({ title, badgeList, children }) => {
|
|
4629
4642
|
const { isMobile } = useViewport();
|
|
@@ -4658,8 +4671,8 @@ const BordTrelloRowFooterBadgeList = ({ title, badgeList, children }) => {
|
|
|
4658
4671
|
return (jsxs("div", { className: "bordTrelloRowFooterTagList", children: [renderTitle(), jsx("div", { className: "bordTrelloRowFooterTagListBadgeList", children: renderBadgeList() })] }));
|
|
4659
4672
|
};
|
|
4660
4673
|
|
|
4661
|
-
var css_248z$
|
|
4662
|
-
styleInject(css_248z$
|
|
4674
|
+
var css_248z$Y = ".bordFloatDropdown{--tw-bg-opacity:1;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity));border:1px solid #e5e5e5;border-radius:.8rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);min-width:160px;position:fixed;z-index:9999}.bordFloatDropdown .dropdownContainer{padding-bottom:.8rem;padding-top:.8rem}.bordFloatDropdown .dropdownContainer .dropdownOption{align-items:flex-start;cursor:pointer;display:flex;gap:1.2rem;padding:1.2rem 1.6rem;transition:background-color .2s ease}.bordFloatDropdown .dropdownContainer .dropdownOption:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bordFloatDropdown .dropdownContainer .dropdownOption .optionIcon{align-items:center;display:flex;flex-shrink:0;justify-content:center}.bordFloatDropdown .dropdownContainer .dropdownOption .optionContent{display:flex;flex:1 1 0%;flex-direction:column;gap:.4rem}.bordFloatDropdown .dropdownContainer .dropdownOption .optionContent .optionLabel{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity));font-size:1.4rem;font-weight:400;line-height:2rem;line-height:1.25}.bordFloatDropdown .dropdownContainer .dropdownOption .optionContent .optionMessage{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity));font-size:1.4rem;font-weight:400;line-height:2rem;line-height:1.25}.bordFloatDropdown.dark{--tw-bg-opacity:1;background-color:rgb(7 15 33/var(--tw-bg-opacity));border-color:#374151}.bordFloatDropdown.dark .dropdownOption:hover{--tw-bg-opacity:1;background-color:rgb(27 32 47/var(--tw-bg-opacity))}.bordFloatDropdown.dark .dropdownOption .optionLabel{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}";
|
|
4675
|
+
styleInject(css_248z$Y);
|
|
4663
4676
|
|
|
4664
4677
|
/**
|
|
4665
4678
|
* @description A floating dropdown component that displays a list of options with icons, labels, and messages.
|
|
@@ -4748,8 +4761,8 @@ const BordFloatDropdown = ({ options, isOpen, onClose, customClassName = '', pos
|
|
|
4748
4761
|
return createPortal(dropdown, document.body);
|
|
4749
4762
|
};
|
|
4750
4763
|
|
|
4751
|
-
var css_248z$
|
|
4752
|
-
styleInject(css_248z$
|
|
4764
|
+
var css_248z$X = ".bordInfoCard{background-color:var(--ds-c-layout-l1);border:.1rem solid;border-radius:1.2rem;max-width:118rem;overflow:hidden;padding:1.6rem 1.6rem 1.2rem;transition:all .3s ease}.bordInfoCard.success{border-color:var(--ds-c-stroke-default)}.bordInfoCard.danger{background-color:rgba(252,84,61,.05);border-color:#fc543d}.bordInfoCard.danger .header{border-color:rgba(252,84,61,.2)}.bordInfoCard.disabled{border-color:var(--ds-c-stroke-default);position:relative}.bordInfoCard.disabled .bordCellItem,.bordInfoCard.disabled .header{opacity:.4}.bordInfoCard .desktopContent .content{display:flex;gap:0}@media (max-width:640px){.bordInfoCard .desktopContent .content{flex-direction:column}}@media (min-width:641px){.bordInfoCard .desktopContent .content{align-items:stretch;flex-direction:row}}.bordInfoCard .desktopContent .header{flex-shrink:0;max-width:15.6rem;min-width:15.6rem}.bordInfoCard .desktopContent .items{flex:1 1 0%}@media (min-width:641px) and (max-width:1023px){.bordInfoCard .desktopContent .items{display:grid;gap:2.4rem;grid-template-columns:repeat(3,14.6rem)}}@media (min-width:1024px){.bordInfoCard .desktopContent .items{align-items:center;display:flex;flex-direction:row;gap:.8rem;overflow-x:auto}}.bordInfoCard .desktopContent .actions{align-items:center;display:flex;flex-shrink:0;gap:.8rem}.bordInfoCard .desktopContent.no-actions .items{justify-content:space-evenly}.bordInfoCard .tabletContent{display:flex;flex-direction:column;gap:0}.bordInfoCard .tabletContent .content{display:flex;gap:0}@media (max-width:640px){.bordInfoCard .tabletContent .content{flex-direction:column}}@media (min-width:641px){.bordInfoCard .tabletContent .content{align-items:stretch;flex-direction:row}}.bordInfoCard .tabletContent .headerContainer{align-items:flex-start;display:flex;gap:2.4rem;margin-bottom:1.6rem}.bordInfoCard .tabletContent .header{flex-shrink:0;max-width:15.6rem;min-width:15.6rem}.bordInfoCard .tabletContent .items{flex:1 1 0%}@media (min-width:641px) and (max-width:1023px){.bordInfoCard .tabletContent .items{display:grid;gap:2.4rem;grid-template-columns:repeat(3,14.6rem)}}@media (min-width:1024px){.bordInfoCard .tabletContent .items{align-items:center;display:flex;flex-direction:row;gap:.8rem;overflow-x:auto}}.bordInfoCard .tabletContent .actions{align-items:center;display:flex;gap:.8rem;margin-top:2.8rem}.bordInfoCard .tabletContent .actions .bordButton{width:100%}.bordInfoCard .tabletContent.no-actions .items{justify-content:space-evenly}.bordInfoCard .mobileContent{display:flex;flex-direction:column;gap:1.6rem}.bordInfoCard .mobileContent .header{--tw-bg-opacity:1;background-color:rgb(250 250 249/var(--tw-bg-opacity));border-bottom:.1rem solid #e5e5e5;padding:.8rem 1.6rem;width:100%}.bordInfoCard .mobileContent .items{display:flex;flex-direction:column;gap:1.6rem;padding:.8rem 1.6rem}.bordInfoCard .mobileContent .footer{padding:.8rem 1.6rem}.bordInfoCard .mobileContent .actions{align-items:center;display:flex;gap:.8rem;margin-top:2.8rem;padding:.8rem 1.6rem}.bordInfoCard .mobileContent .actions .bordButton{width:100%}@media (max-width:640px){.bordInfoCard{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:0 0 1.2rem}}";
|
|
4765
|
+
styleInject(css_248z$X);
|
|
4753
4766
|
|
|
4754
4767
|
/**
|
|
4755
4768
|
* @description A card component that displays information in a horizontal layout (desktop): Header | Items (horizontal row) | Buttons.
|
|
@@ -4792,8 +4805,8 @@ const setOpacityToHex = (hexColor, opacity) => {
|
|
|
4792
4805
|
return hexWithOpacity;
|
|
4793
4806
|
};
|
|
4794
4807
|
|
|
4795
|
-
var css_248z$
|
|
4796
|
-
styleInject(css_248z$
|
|
4808
|
+
var css_248z$W = ".bordMetricCard{align-items:center;border-color:var(--ds-c-stroke-default);border-radius:.95rem;border-width:1px;box-sizing:border-box;display:flex;flex-shrink:0}@media (max-width:1022.4px){.bordMetricCard{height:6.4rem}}@media (min-width:1024px){.bordMetricCard{height:8.4rem}}.bordMetricCard{min-width:0;padding:1.2rem}.bordMetricCard.bordMetricCardWithIcon{overflow:hidden}.bordMetricCardMetricContent{align-items:center;display:flex;flex:1 1 0%;gap:1.2rem;min-width:0;padding:0 .8rem}.bordMetricCardContent{flex:1 1 0%;gap:.4rem;justify-content:flex-end}.bordMetricCardContent,.bordMetricCardValueBlock{align-items:flex-start;display:flex;flex-direction:column;min-width:0}.bordMetricCardValueBlock{gap:.2rem;width:100%}.bordMetricCardIcon{align-items:center;border:none;border-radius:15998.4rem;display:flex;flex-shrink:0;justify-content:center}.bordMetricCardWithIcon.bordMetricCard--sizeLg .bordMetricCardIcon{height:4.8rem;width:4.8rem}.bordMetricCardWithIcon.bordMetricCard--sizeSm .bordMetricCardIcon{height:3.2rem;width:3.2rem}.bordMetricCardTitle{color:var(--ds-c-content-secondary);font-weight:400}.bordMetricCardValueRow{align-items:baseline;display:flex;gap:.4rem}.bordMetricCardValue{font-weight:700}.bordMetricCard--sizeLg .bordMetricCardValue{font-size:3.2rem;line-height:1.15}.bordMetricCard--sizeSm .bordMetricCardValue{font-size:1.6rem;line-height:1.25}@media (max-width:1024){.bordMetricCard.bordMetricCardWithIcon.bordMetricCard--sizeLg .bordMetricCardIcon{height:3.2rem;width:3.2rem}.bordMetricCard.bordMetricCardWithIcon.bordMetricCard--sizeLg .bordMetricCardSubvalue,.bordMetricCard.bordMetricCardWithIcon.bordMetricCard--sizeLg .bordMetricCardValue{font-size:1.6rem;line-height:1.25}}.bordMetricCardSubvalue{font-size:1.6rem;font-weight:700;line-height:1.25}.bordMetricCardDescription{color:var(--ds-c-content-secondary);font-size:1.2rem;font-weight:400;line-height:1.5}.bordMetricCard.bordMetricCard--legacyDefault{border-color:var(--ds-c-stroke-default);border-radius:.95rem;border-width:1px;box-sizing:border-box;display:flex;flex-shrink:0;height:auto;justify-content:space-between;min-height:0;min-width:23.3rem;padding-left:1.2rem;padding-right:1.2rem}.bordMetricCard.bordMetricCard--legacyDefault.bordMetricCardContainerSm{padding:.7rem 1.2rem}.bordMetricCard.bordMetricCard--legacyDefault.bordMetricCardContainerLg{gap:.4rem;padding:1.2rem}.bordMetricCard.bordMetricCard--legacyDefault .bordMetricCardTitleSm{font-size:1rem}.bordMetricCard.bordMetricCard--legacyDefault .bordMetricCardTitleLg{font-size:1.4rem}.bordMetricCard.bordMetricCard--legacyDefault .bordMetricCardMetricContent{align-items:center;display:flex;flex:1 1 0%;gap:1.2rem;min-width:0;padding:0}.bordMetricCard.bordMetricCard--legacyDefault .bordMetricCardContent{display:flex;flex:1 1 0%;flex-direction:column;gap:0;justify-content:flex-start;min-width:0}.bordMetricCard.bordMetricCard--legacyDefault .bordMetricCardValue{font-size:3.2rem;font-weight:700}";
|
|
4809
|
+
styleInject(css_248z$W);
|
|
4797
4810
|
|
|
4798
4811
|
const COLOR_VARIANT_MAP = {
|
|
4799
4812
|
green: '#00B188',
|
|
@@ -4851,8 +4864,8 @@ const BordMetricCard = ({ title, value, subvalue, description, icon, textColor,
|
|
|
4851
4864
|
return (jsx("div", { style: bgStyle, className: containerClassName, children: jsxs("div", { className: "bordMetricCardMetricContent", children: [jsx("div", { className: "bordMetricCardIcon", style: { backgroundColor: iconCircleBg }, children: jsx(BordOneToneIcon, { variant: icon, standardSize: iconStandardSize, stroke: iconStroke }) }), jsxs("div", { className: "bordMetricCardContent", children: [jsx("h3", { className: titleClassName, children: title }), jsxs("div", { className: "bordMetricCardValueBlock", children: [valueRow, descriptionEl] })] })] }) }));
|
|
4852
4865
|
};
|
|
4853
4866
|
|
|
4854
|
-
var css_248z$
|
|
4855
|
-
styleInject(css_248z$
|
|
4867
|
+
var css_248z$V = ".bordTabBarContainer{align-items:center;background-color:var(--ds-c-layout-l2);border-radius:12px;display:flex;gap:8px;padding:4px}.bordTabBarContainer.bordTabBarContainerGray{--tw-bg-opacity:1;background-color:rgb(235 235 235/var(--tw-bg-opacity))}.bordTabBarContainer .bordTabButton{border-radius:8px;border-width:1px;color:var(--ds-c-bool-disabled-fg);font-size:14px;padding:8px 16px;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordTabBarContainer .bordTabButton:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.bordTabBarContainer .bordTabButton{border-color:transparent}.bordTabBarContainer .bordTabButton.bordTabButtonGray:not(.bordTabButtonActive){--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity))}.bordTabBarContainer .bordTabButton.bordTabButtonActive{--tw-shadow:0 5px 8px 0 rgba(0,0,0,.15);--tw-shadow-colored:0 5px 8px 0 var(--tw-shadow-color);background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-interactive);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--ds-c-content-default)}.bordTabBarDropdown{position:relative}.bordTabBarDropdown,.bordTabBarDropdownInner{border-radius:1.2rem;display:flex;flex-direction:column;padding:.4rem}.bordTabBarDropdownInner{background-color:var(--ds-c-layout-l2);overflow:hidden}.bordTabBarDropdownTrigger{--tw-shadow:0 0.5rem 0.8rem 0 rgba(0,0,0,.15);--tw-shadow-colored:0 0.5rem 0.8rem 0 var(--tw-shadow-color);align-items:center;background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-interactive);border-radius:.8rem;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--ds-c-content-default);display:flex;font-size:1.4rem;justify-content:space-between;padding:.4rem 1.6rem;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.bordTabBarDropdownTrigger:focus{outline:2px solid transparent;outline-offset:2px}.bordTabBarDropdownTriggerLabel{margin-left:.8rem}.bordTabBarDropdownChevron{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%23626C82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;height:1.2rem;margin-left:1.2rem;transition:transform .2s;width:1.2rem}.bordTabBarDropdownChevron.isOpen{transform:rotate(180deg)}.bordTabBarDropdownList{border-color:var(--ds-c-stroke-default);border-radius:.8rem;border-width:1px;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.08);margin-top:.8rem;overflow:hidden}.bordTabBarDropdownList,.bordTabBarDropdownOption{background-color:var(--ds-c-layout-l1)}.bordTabBarDropdownOption{align-items:center;color:#6f737d;cursor:pointer;display:flex;font-size:1.4rem;gap:.4rem;padding:.8rem 1.6rem;text-align:left;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.bordTabBarDropdownOption:hover{background-color:var(--ds-c-layout-l2)}.bordTabBarDropdownRadio{border-color:var(--ds-c-stroke-interactive);border-radius:15998.4rem;border-width:.2rem;flex-shrink:0;height:1.8rem;transition:all .2s;width:1.8rem}.bordTabBarDropdownRadio.isSelected{background-color:var(--ds-c-primary-bg-default);border-color:var(--ds-c-primary-bg-default);box-shadow:inset 0 0 0 .3rem var(--ds-c-layout-l1)}";
|
|
4868
|
+
styleInject(css_248z$V);
|
|
4856
4869
|
|
|
4857
4870
|
const BordTabBar = ({ tabs = [], defaultValue, activeTab: externalActiveTab, onChange, containerClassName = '', buttonClassName = '', activeTabClassName = '', }) => {
|
|
4858
4871
|
const { isMobile, width } = useViewport();
|
|
@@ -5226,8 +5239,8 @@ const ThemeProvider = ({ children, isDark = false }) => {
|
|
|
5226
5239
|
}, children: children }));
|
|
5227
5240
|
};
|
|
5228
5241
|
|
|
5229
|
-
var css_248z$
|
|
5230
|
-
styleInject(css_248z$
|
|
5242
|
+
var css_248z$U = ".bordTabDS{align-items:center;border-bottom-width:1px;border-color:transparent;border-radius:8px 8px 0 0;color:var(--ds-c-content-secondary);display:flex;font-size:14px;font-weight:400;gap:.5rem;gap:8px;justify-content:center;min-width:108px;padding:8px 24px}.selected{background-color:var(--bord-tab-bgcolor);border-color:var(--bord-tab-color);color:var(--bord-tab-color)}.disabled{--tw-text-opacity:1;color:rgb(180 180 180/var(--tw-text-opacity))}.disabled:hover{cursor:not-allowed}";
|
|
5243
|
+
styleInject(css_248z$U);
|
|
5231
5244
|
|
|
5232
5245
|
const positions = {
|
|
5233
5246
|
top: 'flex-col-reverse',
|
|
@@ -5294,8 +5307,8 @@ function BordTabsGroupWithBadge({ value, defaultValue, tabs = [], textColor, onC
|
|
|
5294
5307
|
}) }));
|
|
5295
5308
|
}
|
|
5296
5309
|
|
|
5297
|
-
var css_248z$
|
|
5298
|
-
styleInject(css_248z$
|
|
5310
|
+
var css_248z$T = ".bordGenericSelectDS{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.6rem;font-size:1.2rem;height:-moz-max-content;height:max-content;left:0;line-height:1rem;margin-top:3.2rem;max-height:30rem;overflow-y:auto;padding:.8rem;position:absolute;top:1rem;width:-moz-max-content;width:max-content}.bordGenericSelectDS::-webkit-scrollbar{height:.2rem;width:.2rem}.bordGenericSelectDS::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.bordGenericSelectDS::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}.bordGenericSelectDS .optionContainer{cursor:pointer;margin-bottom:.3rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordGenericSelectDS .optionContainer,.bordGenericSelectDS .optionContainer .optionText{align-items:center;display:flex;gap:1rem}";
|
|
5311
|
+
styleInject(css_248z$T);
|
|
5299
5312
|
|
|
5300
5313
|
const BordGenericSelect = ({ selectOptions, changeSelectedOption, defaultValue, changeOpenStatusFunction, absolutePositionElement, }) => {
|
|
5301
5314
|
const refContainer = useRef(null);
|
|
@@ -5315,8 +5328,8 @@ const BordGenericSelect = ({ selectOptions, changeSelectedOption, defaultValue,
|
|
|
5315
5328
|
return (jsxs("div", { ref: refContainer, className: "bordGenericSelectDS", children: [jsx("div", { className: "containerAbsolute", children: selectOptions }), absolutePositionElement] }));
|
|
5316
5329
|
};
|
|
5317
5330
|
|
|
5318
|
-
var css_248z$
|
|
5319
|
-
styleInject(css_248z$
|
|
5331
|
+
var css_248z$S = ".bordCheckBoxDS{align-items:center;display:flex;gap:.8rem}.bordCheckBoxDS .bordCheckBoxLabel{color:var(--ds-c-content-secondary);font-size:1.4rem;line-height:1.8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordCheckBoxDS.active .bordCheckBoxLabel{--tw-text-opacity:1;color:rgb(34 207 171/var(--tw-text-opacity))}.bordCheckBoxDS.disabled .bordCheckBoxLabel,.bordCheckBoxDS.inactive .bordCheckBoxLabel{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));cursor:not-allowed}.bordCheckBoxButtonSvg svg{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordCheckBoxButtonSvg svg .largeRect{fill:transparent;stroke:var(--ds-c-content-secondary)}.bordCheckBoxButtonSvg svg .smallRect{stroke:transparent}.bordCheckBoxButtonSvg.active svg .largeRect{fill:var(--ds-c-primary-bg-secondary);stroke:#22cfab}.bordCheckBoxButtonSvg.active svg .smallRect{stroke:#22cfab}.bordCheckBoxButtonSvg.disabled svg{cursor:not-allowed}.bordCheckBoxButtonSvg.disabled svg .largeRect{fill:var(--ds-c-bool-disabled-bg);stroke:#626c82}.bordCheckBoxButtonSvg.disabled svg .largeRect:where([data-theme=dark],[data-theme=dark] *){fill:#262b39}.bordCheckBoxButtonSvg.inactive svg{cursor:not-allowed}.bordCheckBoxButtonSvg.inactive svg .largeRect,.bordCheckBoxButtonSvg.inactive svg .smallRect{stroke:#626c82}";
|
|
5332
|
+
styleInject(css_248z$S);
|
|
5320
5333
|
|
|
5321
5334
|
/**
|
|
5322
5335
|
* BordCheckBoxSvg component
|
|
@@ -5363,8 +5376,8 @@ const BordCheckBox = ({ label, isButtonActive, isButtonDisabled, handleClickButt
|
|
|
5363
5376
|
return (jsxs("div", { className: className.trim(), children: [jsx(BordCheckBoxButton, { isActive: isActive, isDisabled: isDisabled, isInactive: isInactive, customSize: customSize, handleClickButton: handleClickButton, isButtonActive: isButtonActive, isButtonDisabled: isButtonDisabled }), !!label && (jsx("p", { className: "bordCheckBoxLabel", ...labelProps, children: label }))] }));
|
|
5364
5377
|
};
|
|
5365
5378
|
|
|
5366
|
-
var css_248z$
|
|
5367
|
-
styleInject(css_248z$
|
|
5379
|
+
var css_248z$R = ".bordSearchBarHost{align-items:center;display:flex;gap:.8rem;max-width:100%;min-width:0;width:100%}.bordSearchBarHost>.bordSearchBarDSPackage{flex:1 1 0%;min-width:0}.bordSearchBarHost .bordSearchBarSelectRoot{max-width:100%;width:-moz-max-content;width:max-content}.bordSearchBarHost>.bordSearchBarSelectBlock{flex-shrink:0;min-width:0;width:auto}@media (min-width:1024px){.bordSearchBarHost>.bordSearchBarDSPackage{flex:none}.bordSearchBarHost>.bordSearchBarSelectBlock{flex-shrink:1;max-width:22rem;min-width:0}}.bordSearchBarDS{color:var(--ds-c-bool-disabled-sec-fg)}.bordSearchBarDS .bordSearchBarLabel{font-size:1.2rem;line-height:1.6rem;margin-bottom:.4rem}.bordSearchBarDS .bordSearchBarLabel .loaderLabel{border-radius:.4rem;height:1.6rem;width:10rem}.bordSearchBarDS .searchBarContainerSkeletor{border-radius:.6rem;border-style:none;border-width:1px;height:4rem;width:100%}.bordSearchBarDS .searchBarContainer{align-items:center;border-color:var(--ds-c-stroke-interactive);border-radius:.6rem;border-style:solid;border-width:1px;display:flex;height:4rem;justify-content:flex-start;width:100%}.bordSearchBarDS .searchBarContainer:focus-within{border-color:var(--ds-c-primary-bg-default)}.bordSearchBarDS .searchBarContainer{background-color:transparent}.bordSearchBarDS .searchBarContainer .searchBarMain{align-items:center;display:flex;flex:1 1 0%;min-width:0}.bordSearchBarDS .searchBarContainer .magnifierIconContainer{padding-left:1.6rem;width:3.8rem}.bordSearchBarDS .searchBarContainer .inputContainer{align-items:center;display:flex;flex:1 1 0%;gap:.1rem}.bordSearchBarDS .searchBarContainer .inputContainer input{background-color:transparent;border-radius:.6rem;border-style:none;font-size:1.4rem;height:3.8rem;line-height:.75rem;padding-bottom:.1rem;padding-right:.3rem;width:100%}.bordSearchBarDS .searchBarContainer .inputContainer input:focus{box-shadow:none;outline:none}.bordSearchBarDS .searchBarContainer .inputContainer input::-moz-placeholder{font-size:1.2rem;line-height:.75rem}.bordSearchBarDS .searchBarContainer .inputContainer input::placeholder{font-size:1.2rem;line-height:.75rem}.bordSearchBarDS .searchBarContainer .right{align-items:center;display:flex;height:100%;width:3.8rem}.bordSearchBarDS .searchBarContainer .right .deleteIconContainer{cursor:pointer;display:flex;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.bordSearchBarDS.deleteButtonStyles{width:calc(100% - 7rem)}.bordSearchBarDS svg path{stroke:currentColor}.bordSearchBarDS.filled{color:var(--ds-c-content-default)}.bordSearchBarDS.filled svg path{stroke:currentColor}.bordSearchBarDS.deactivated .bordSearchBarLabel{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordSearchBarDS.deactivated .searchBarContainer{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity));cursor:not-allowed}.bordSearchBarDS.deactivated .searchBarContainer input{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));cursor:not-allowed}.bordSearchBarDS.error label{color:red}";
|
|
5380
|
+
styleInject(css_248z$R);
|
|
5368
5381
|
|
|
5369
5382
|
const SEARCH_SELECT_DROPDOWN_WIDTH = 184;
|
|
5370
5383
|
const BordSearchBar = ({ handleChange, customClassName, placeholder, hasDeleteButton, label, isDeactivated, isFilled, includeMagnifierIcon = true, includeDropdownArrowIcon = false, selectOptions, customIcon, handleBlur, defaultValue, customInputClass, customSearchBarContainer, standardSize, loading, autoFocus = true, }) => {
|
|
@@ -5446,8 +5459,8 @@ const BordSearchBar = ({ handleChange, customClassName, placeholder, hasDeleteBu
|
|
|
5446
5459
|
return searchColumn;
|
|
5447
5460
|
};
|
|
5448
5461
|
|
|
5449
|
-
var css_248z$
|
|
5450
|
-
styleInject(css_248z$
|
|
5462
|
+
var css_248z$Q = ".bordFiltersOptionsPanel{display:flex;flex-direction:column;width:100%}.bordFiltersOptionsPanelSearch{flex-shrink:0;padding-bottom:1.2rem;padding-top:1rem;width:100%}.bordFiltersOptionsPanelSearch .bordSearchBarDS{width:100%}.bordFiltersOptionsPanelList{flex-direction:column;min-height:0;overflow-y:auto}.bordFiltersOptionsPanelOption{cursor:pointer;justify-content:space-between;line-height:2rem;line-height:1.5;padding-bottom:1rem;padding-top:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.bordFiltersOptionsPanelOption,.bordFiltersOptionsPanelOptionText{align-items:center;color:var(--ds-c-content-secondary);display:flex;font-size:1.4rem;font-weight:400}.bordFiltersOptionsPanelOptionText{flex:1 1 0%;line-height:2rem;min-width:0}.bordFiltersOptionsPanelOptionCheck{flex-shrink:0}.bordFiltersOptionsPanelOptionImg{flex-shrink:0;height:1.6rem;-o-object-fit:contain;object-fit:contain;width:1.6rem}";
|
|
5463
|
+
styleInject(css_248z$Q);
|
|
5451
5464
|
|
|
5452
5465
|
const SEARCH_THRESHOLD = 5;
|
|
5453
5466
|
const BordFiltersOptionsPanel = ({ options, onOptionToggle, isOpen, searchPlaceholder = 'Buscar', filterTitle = '', }) => {
|
|
@@ -5472,8 +5485,8 @@ const BordFiltersOptionsPanel = ({ options, onOptionToggle, isOpen, searchPlaceh
|
|
|
5472
5485
|
}, role: "button", tabIndex: 0, children: [jsxs("div", { className: "bordFiltersOptionsPanelOptionText", children: [typeof option.icon === 'string' && option.icon ? (jsx("img", { src: option.icon, alt: "", className: "bordFiltersOptionsPanelOptionImg" })) : "", typeof option.icon !== 'string' && React.isValidElement(option.icon) ? option.icon : null, jsx("span", { children: option.name })] }), jsx("div", { className: "bordFiltersOptionsPanelOptionCheck", children: jsx(BordCheckBox, { label: "", isButtonActive: option.isActive, customSize: "1.6rem" }) })] }, `${filterTitle}-opt-${option.id ?? option.value ?? i}`))) })] }));
|
|
5473
5486
|
};
|
|
5474
5487
|
|
|
5475
|
-
var css_248z$
|
|
5476
|
-
styleInject(css_248z$
|
|
5488
|
+
var css_248z$P = ".moduleFilterExpandableSelectDS{--tw-border-opacity:1;align-items:center;background-color:inherit;border-color:rgb(230 230 230/var(--tw-border-opacity));border-radius:.8rem;border-width:1px;color:var(--ds-c-content-secondary);cursor:pointer;display:flex;font-size:1.2rem;font-weight:500;gap:.8rem;justify-content:space-between;line-height:1.6rem;line-height:1.5;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content}.moduleFilterExpandableSelectDS:where([data-theme=dark],[data-theme=dark] *){border-color:var(--ds-c-stroke-interactive)}.moduleFilterExpandableSelectDS.opened{border-color:var(--ds-c-stroke-interactive);color:var(--ds-c-content-default)}.moduleFilterExpandableSelectDS.opened .moduleFilterExpandableSelectTrigger{color:var(--ds-c-content-default)}.moduleFilterExpandableSelectDS .moduleFilterExpandableSelectTrigger{align-items:center;color:var(--ds-c-content-secondary);cursor:pointer;display:flex;font-size:1.2rem;font-weight:500;gap:.8rem;justify-content:space-between;line-height:1.6rem;line-height:1.5;padding:.8rem;width:100%}.moduleFilterExpandableSelectDS .closedSelect{color:var(--ds-c-content-secondary);flex-grow:1;font-weight:500}.moduleFilterExpandableSelectDS .arrowIcon .bordOneToneIcon svg path{stroke:currentColor}.moduleFilterExpandableSelectDS .bordGenericSelectDS{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;background-color:inherit;border-color:var(--ds-c-stroke-default);border-radius:6px;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--ds-c-content-secondary);cursor:default;font-size:1rem;font-weight:400;height:-moz-fit-content;height:fit-content;left:0;line-height:1rem;margin-top:.8rem;max-height:min(50vh,320px);max-width:min(calc(100vw - 24px),320px);min-width:200px;overflow-y:auto;padding-left:.4rem;padding-right:.6rem;padding-top:.8rem;position:absolute;top:100%;width:-moz-max-content;width:max-content;z-index:20}.moduleFilterExpandableSelectDS .bordGenericSelectDS .optionContainer{cursor:pointer;display:flex;gap:.4rem;padding:.4rem}.moduleFilterExpandableSelectDS .bordGenericSelectDS .optionContainer .optionText{font-size:14px;font-weight:400}.moduleFilterExpandableSelectDS.active{border-color:var(--ds-c-stroke-interactive)}.moduleFilterExpandableSelectDS.active .closedSelect,.moduleFilterExpandableSelectDS.active .moduleFilterExpandableSelectTrigger{color:var(--ds-c-content-default);font-weight:500}";
|
|
5489
|
+
styleInject(css_248z$P);
|
|
5477
5490
|
|
|
5478
5491
|
const BordFiltersExpandableSelect = ({ filterTitle, openSelectStatus, openSelectFunction, rawSelectOptions, handleChangeSelectedOption, isFilterActive, searchPlaceholder = 'Buscar', }) => {
|
|
5479
5492
|
const classnames = `moduleFilterExpandableSelectDS ${openSelectStatus ? 'opened' : ''} ${isFilterActive ? 'active' : ''}`;
|
|
@@ -5490,8 +5503,8 @@ const BordFiltersExpandableSelect = ({ filterTitle, openSelectStatus, openSelect
|
|
|
5490
5503
|
}, role: "button", tabIndex: 0, children: [jsx("div", { className: "closedSelect", children: filterTitle }), !openSelectStatus && (jsx("div", { className: "arrowIcon", children: jsx(BordOneToneIcon, { variant: "arrowHeadDown", customWidth: "1.2rem" }) })), openSelectStatus && (jsx("div", { className: "arrowIcon", children: jsx(BordOneToneIcon, { variant: "arrowHeadUp", customWidth: "1.2rem" }) }))] }), openSelectStatus && (jsx(BordGenericSelect, { selectOptions: [dropdownPanel], changeSelectedOption: handleChangeSelectedOption, changeOpenStatusFunction: changeOpenStatusFunction, defaultValue: "" }))] }));
|
|
5491
5504
|
};
|
|
5492
5505
|
|
|
5493
|
-
var css_248z$
|
|
5494
|
-
styleInject(css_248z$
|
|
5506
|
+
var css_248z$O = ".bordTagDS{align-items:center;border-radius:.4rem;border-width:1px;display:inline-flex;font-weight:500;gap:.4rem;height:auto;justify-content:space-between}.bordTagDSSize-small{font-size:1rem;gap:.4rem;line-height:1.3rem;padding:0 .4rem;width:auto}.bordTagDSSize-medium{font-size:1.2rem;gap:.8rem;line-height:1.5rem;padding:.4rem .8rem;width:auto}.bordTagDSSize-large{font-size:1.4rem;gap:.8rem;line-height:1.8rem;min-width:24.8rem;padding:1rem 1.6rem}.bordTagDSColor-blue{background-color:var(--ds-c-tags-blue-surface);border-color:var(--ds-c-tags-blue-fg)}.bordTagDSColor-pink{background-color:var(--ds-c-tags-pink-surface);border-color:var(--ds-c-comp-pink)}.bordTagDSColor-purple{background-color:var(--ds-c-tags-purple-surface);border-color:var(--ds-c-comp-purple)}.bordTagDSColor-brown{background-color:var(--ds-c-tags-brown-surface);border-color:var(--ds-c-comp-brown)}.bordTagDSColor-yellow{background-color:var(--ds-c-tags-yellow-surface);border-color:var(--ds-c-bool-warning-fg)}.bordTagDSColor-green{background-color:var(--ds-c-tags-green-surface);border-color:var(--ds-c-bool-success-fg)}.bordTagDSColor-red{background-color:var(--ds-c-tags-red-surface);border-color:var(--ds-c-comp-red);color:var(--ds-c-comp-red)}.bordTagDSLabel{color:var(--ds-c-content-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordTagDSClose{align-items:center;background-color:transparent;border-width:0;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin:0;padding:0}.bordTagDSClose .bordOneToneIcon svg path{stroke:var(--ds-c-content-default)}.bordTagDSClose:focus-visible{border-radius:.2rem;outline-color:currentColor;outline-offset:2px;outline-style:solid;outline-width:2px}";
|
|
5507
|
+
styleInject(css_248z$O);
|
|
5495
5508
|
|
|
5496
5509
|
const SIZE_CLASS = {
|
|
5497
5510
|
small: 'bordTagDSSize-small',
|
|
@@ -5505,8 +5518,8 @@ const BordTag = ({ labelName, customClassName = '', standardSize = 'medium', col
|
|
|
5505
5518
|
return (jsxs("div", { className: rootClass, children: [jsx("label", { className: "bordTagDSLabel", children: labelName }), onRemove && (jsx("button", { type: "button", className: "bordTagDSClose", onClick: onRemove, "aria-label": removeButtonAriaLabel, children: jsx(BordOneToneIcon, { variant: "x", standardSize: 14, className: "bordTagDSClose" }) }))] }));
|
|
5506
5519
|
};
|
|
5507
5520
|
|
|
5508
|
-
var css_248z$
|
|
5509
|
-
styleInject(css_248z$
|
|
5521
|
+
var css_248z$N = ".bordTags{align-content:center;align-items:center;display:flex;flex-wrap:wrap;gap:.8rem}.bordTagsResults{--tw-text-opacity:1;color:rgb(111 115 125/var(--tw-text-opacity));flex-shrink:0;font-size:1.2rem;font-weight:400;line-height:1.5rem;line-height:1.5}.bordTagsResults:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity))}.bordTagsButtonAdd{align-items:center;background-color:transparent;border-width:0;cursor:pointer;display:flex;font:inherit;gap:.2rem;padding:0}.bordTagsButtonAdd .bordOneToneIcon svg>path{stroke:#00b188}.bordTagsButtonAddLabel{--tw-text-opacity:1;color:rgb(0 177 136/var(--tw-text-opacity));font-size:1.2rem;line-height:1.5rem}.bordTagsButtonAddLabel:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(34 207 171/var(--tw-text-opacity))}";
|
|
5522
|
+
styleInject(css_248z$N);
|
|
5510
5523
|
|
|
5511
5524
|
const defaultFormatResultsCount = (count) => `${count} ${count === 1 ? 'resultado' : 'resultados'}:`;
|
|
5512
5525
|
const BordTags = ({ items, standardSize = 'medium', className = '', visibleTags = 5, onRemove, onAddTags, tagLabel = 'Agregar etiquetas', showAction = false, showAddIcon = false, iconVariant = 'plus', resultsCount, colorForAll, colorForRest = 'blue', formatResultsCount = defaultFormatResultsCount, }) => {
|
|
@@ -5516,8 +5529,8 @@ const BordTags = ({ items, standardSize = 'medium', className = '', visibleTags
|
|
|
5516
5529
|
return (jsxs("div", { className: `bordTags ${className}`, children: [showResultsLine && (jsx("span", { className: "bordTagsResults", "aria-live": "polite", children: resultsText })), items.map((item, index) => index < visibleTags && (jsx(BordTag, { labelName: item.labelName, standardSize: standardSize, color: colorForAll ?? item.color, onRemove: item.onRemove ?? onRemove, removeButtonAriaLabel: item.removeButtonAriaLabel }, index))), restTags > 0 && (jsx(BordTag, { labelName: `+${restTags} más`, standardSize: standardSize, color: colorForAll ?? colorForRest, removeButtonAriaLabel: "Ver m\u00E1s" })), onAddTags && (showAction && (jsxs("button", { type: "button", className: "bordTagsButtonAdd", onClick: onAddTags, children: [showAddIcon && jsx(BordOneToneIcon, { variant: iconVariant, standardSize: 12 }), jsx("span", { className: "bordTagsButtonAddLabel", children: tagLabel })] })))] }));
|
|
5517
5530
|
};
|
|
5518
5531
|
|
|
5519
|
-
var css_248z$
|
|
5520
|
-
styleInject(css_248z$
|
|
5532
|
+
var css_248z$M = ".bordFiltersDS{background-color:var(--ds-c-layout-l3);border-radius:1.2rem;max-width:100%;min-width:0;padding-bottom:.4rem;z-index:20}.bordFiltersDS:not(.bordFiltersCompact){align-items:stretch;display:flex;flex-direction:column;gap:.9rem}.bordFiltersDSToolbar{--tw-text-opacity:1;background-color:inherit;border-radius:1.2rem;color:rgb(255 255 255/var(--tw-text-opacity));flex-wrap:wrap;line-height:1.6rem;max-width:100%;min-width:0;padding:.4rem .8rem}.bordFiltersDSToolbar,.bordFiltersDSToolbar .bordFiltersIconContainer{align-items:center;display:flex;font-size:1.2rem;gap:.8rem}.bordFiltersDSToolbar .bordFiltersIconContainer{color:var(--ds-c-content-secondary);cursor:pointer;justify-content:center;line-height:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordFiltersDSToolbar .bordFiltersIconContainer path{stroke:currentColor}.bordFiltersDSToolbar .filtersContainer{align-items:center;background-color:inherit;display:flex;flex-wrap:wrap;gap:.8rem}.bordFiltersDSToolbar .filtersContainer .filtersListExpandableSelects{align-items:center;background-color:inherit;display:flex;flex:1 1 0%;flex-wrap:wrap;gap:.8rem;min-width:0}.bordFiltersCompact{align-items:center;display:flex;gap:.8rem;justify-content:space-between}.bordFiltersTags{max-width:100%;min-width:0;width:100%}.bordFiltersSort{align-items:center;display:flex;flex-shrink:0;margin-left:auto}.bordFiltersSort .bordSortSelect{align-items:center;align-self:center}.bordFiltersSort .bordSortSelectTriggerLabel{color:var(--ds-c-content-default);font-size:1.2rem;font-weight:500;line-height:1.6rem;line-height:1.5}.bordFiltersCompactBar{align-items:center;display:flex;gap:.8rem;min-width:0;width:100%}.bordFiltersCompactTrigger{align-items:center;background-color:inherit;border-color:var(--ds-c-stroke-default);border-radius:.8rem;border-width:1px;color:var(--ds-c-content-secondary);cursor:pointer;display:flex;flex-shrink:0;height:4rem;justify-content:center;min-width:4rem;padding:.8rem;position:relative;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordFiltersCompactTrigger path{stroke:currentColor}.bordFiltersCompactTriggerActive{background-color:var(--ds-c-primary-bg-default);border-color:var(--ds-c-primary-bg-default);color:var(--ds-c-primary-fg-default)}.bordFiltersCompactTriggerActive path{stroke:currentColor}.bordFiltersCompactBadge{align-items:center;background-color:var(--ds-c-primary-fg-default);border-radius:15998.4rem;color:var(--ds-c-primary-bg-default);display:flex;font-size:1rem;font-weight:700;height:1.8rem;justify-content:center;line-height:1.302rem;line-height:1;min-width:1.8rem;padding-left:.4rem;padding-right:.4rem;position:absolute;right:-.4rem;top:-.4rem}.bordFiltersMobileSheet{display:flex;flex-direction:column;inset:0;justify-content:flex-end;position:fixed;z-index:200}.bordFiltersMobileSheetBackdrop{background-color:var(--ds-c-modal-overlay);border-width:0;cursor:default;inset:0;padding:0;position:absolute}.bordFiltersMobileSheetPanel{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);background-color:var(--ds-c-layout-l1);border-top-left-radius:1.6rem;border-top-right-radius:1.6rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;margin-left:auto;margin-right:auto;max-height:min(100dvh,105rem);min-height:min(88dvh,105rem);position:relative;transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);width:100%;will-change:transform;z-index:10}.bordFiltersMobileSheetPanelVisible{transform:translateY(0)}.bordFiltersMobileSheetHeader{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;padding:1.6rem 2rem .8rem}.bordFiltersMobileSheetHeaderTitle{align-items:center;color:var(--ds-c-content-default);display:flex;font-size:1.6rem;font-weight:600;gap:1rem;line-height:2.4rem}.bordFiltersMobileSheetHeaderTitle path{stroke:currentColor}.bordFiltersMobileSheetClose{align-items:center;background-color:transparent;border-radius:.6rem;border-width:0;color:var(--ds-c-content-secondary);cursor:pointer;display:flex;justify-content:center}.bordFiltersMobileSheetClose path{stroke:currentColor}.bordFiltersMobileSheetBody{flex:1 1 0%;min-height:0;overflow-y:auto;padding-bottom:1.2rem;padding-left:2rem;padding-right:2rem}.bordFiltersMobileSheetSection{border-bottom-width:1px;border-color:var(--ds-c-stroke-default)}.bordFiltersMobileSheetSection:last-child{border-bottom-width:0}.bordFiltersMobileSheetSectionHeader{align-items:center;background-color:transparent;border-width:0;color:var(--ds-c-content-default);cursor:pointer;display:flex;font-size:1.4rem;font-weight:500;gap:1.2rem;justify-content:space-between;line-height:2rem;padding-bottom:1rem;padding-top:1rem;text-align:left;width:100%}.bordFiltersMobileSheetSectionHeader path{stroke:currentColor}.bordFiltersMobileSheetSectionHeaderOpen{color:var(--ds-c-content-default)}.bordFiltersMobileSheetSectionTitle{flex:1 1 0%}.bordFiltersMobileSheetSectionCount{color:var(--ds-c-content-default);font-weight:500}.bordFiltersMobileSheetSectionPanel{padding-bottom:1.6rem}.bordFiltersMobileSheetFooter{align-items:center;display:flex;flex-shrink:0;gap:1.2rem;justify-content:space-between;padding:1.6rem 2rem 2.4rem}.bordFiltersMobileSheetFooterNoActiveSelections{cursor:default}.bordFiltersMobileSheetFooterApply,.bordFiltersMobileSheetFooterClear{flex:1 1 0%}.bordFiltersMobileSheetFooterClear.bordButton.secondary.bordButtonOutlined:enabled .textContainer{color:var(--ds-c-content-default)}.bordFiltersMobileSheetFooterClear.bordButton.secondary.bordButtonOutlined:enabled .bordCustomTOneIcon svg>path{stroke:var(--ds-c-content-secondary)}@media (prefers-reduced-motion:reduce){.bordFiltersMobileSheetPanel{transition-duration:.01ms}}.bordFiltersSkeletonLoader{background-color:transparent;border-radius:.6rem;height:4.2rem;pointer-events:none}";
|
|
5533
|
+
styleInject(css_248z$M);
|
|
5521
5534
|
|
|
5522
5535
|
const BordFilters = ({ filtersList, filtersTitle, handleResetFilters, filtersActiveStyle, filtersContainerStyles, filterIcon = 'filter', isLoading, flexDirection = 'row', sort, filterSearchPlaceholder = 'Buscar', mobileSheetTitle = 'Filtros', mobileApplyLabel = 'Aplicar', mobileClearLabel = 'Limpiar', onMobileFiltersApply, tags, customClassNameForFiltersExpandableSelects, }) => {
|
|
5523
5536
|
const { isDesktop } = useViewport();
|
|
@@ -5599,8 +5612,8 @@ const BordFilters = ({ filtersList, filtersTitle, handleResetFilters, filtersAct
|
|
|
5599
5612
|
return (jsx("section", { className: `bordFiltersDS${isDesktop ? '' : ' bordFiltersCompact'}`, children: isDesktop ? (jsxs(Fragment, { children: [renderDesktop(), tags ? jsx(BordTags, { ...tags, className: ['bordFiltersTags', tags.className].filter(Boolean).join(' ') }) : ''] })) : (renderCompact()) }));
|
|
5600
5613
|
};
|
|
5601
5614
|
|
|
5602
|
-
var css_248z$
|
|
5603
|
-
styleInject(css_248z$
|
|
5615
|
+
var css_248z$L = ".bordModalDS{--tw-backdrop-blur:blur(12px);align-items:center;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--ds-c-modal-overlay);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100vw;z-index:90}";
|
|
5616
|
+
styleInject(css_248z$L);
|
|
5604
5617
|
|
|
5605
5618
|
const BordModal = ({ modalContent, closesOnClickOutside = true, closeModalCallback, clickOutsideCallback, shouldCloseModal, customZIndex, customClassName = '', }) => {
|
|
5606
5619
|
const [isModalOpened, setIsModalOpened] = useState(true);
|
|
@@ -5790,8 +5803,8 @@ const BordIlustrationIcon = ({ variant, standardSize = 24, customWidth, style, }
|
|
|
5790
5803
|
return (jsx("div", { className: "bordIlustrationIcon", style: { ...style, width: iconWidth }, children: React.createElement(iconComponent, {}) }));
|
|
5791
5804
|
};
|
|
5792
5805
|
|
|
5793
|
-
var css_248z$
|
|
5794
|
-
styleInject(css_248z$
|
|
5806
|
+
var css_248z$K = ".modalContentDS{align-items:center;background-color:var(--ds-c-layout-bg);border-radius:.6rem;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:50}.modalContentDS.gradientBackground{overflow:hidden}.modalContentDS .contentHeader{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-top:4rem}.modalContentDS .contentHeader.showIconIllustration{flex-direction:column}.modalContentDS .contentHeader .contentIconIllustration{margin-bottom:3.4rem}.modalContentDS .contentHeader .title{color:var(--ds-c-content-default);font-size:2rem;font-weight:700;line-height:2.6rem}.modalContentDS .contentHeader .subTitle{color:var(--ds-c-content-secondary);font-size:1.2rem;line-height:1.5rem;margin-top:.8rem}.modalContentDS .leftAlignmentTitle{justify-content:flex-start}.modalContentDS .customSectionContainer{overflow-y:scroll}.modalContentDS .customModalContainer{align-items:flex-start;display:flex;height:100%;justify-content:center;padding-left:4rem;padding-right:4rem}.modalContentDS .withoutHeader{height:100%;overflow:auto;padding:4rem;width:100%}.modalContentDS .exitContentButton{cursor:pointer;position:absolute;right:2.4rem;top:2.4rem;z-index:10}.modalContentDS .exitContentButton svg>path{stroke:var(--ds-c-content-secondary)}.modalContentDS .backContentButton{cursor:pointer;left:2.4rem;position:absolute;top:2.4rem}.modalContentDS .buttonsContainer{display:flex;gap:1.2rem;justify-content:center;padding:4rem}@media (max-width:768px){.modalContentDS .buttonsContainer{padding:1.6rem 1.2rem}}@media (max-width:380px){.modalContentDS .buttonsContainer{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:1.6rem 1.2rem}}.modalContentDS.sm{height:34rem;width:48rem}@media (max-width:768px){.modalContentDS.sm{height:-moz-max-content;height:max-content;padding:1.2rem;width:100%}}.modalContentDS.md{height:48rem;width:58rem}@media (max-width:768px){.modalContentDS.md{height:-moz-max-content;height:max-content;padding:1.2rem;width:100%}}.modalContentDS.lg{height:50rem;width:68rem}@media (max-width:768px){.modalContentDS.lg{height:-moz-max-content;height:max-content;padding:1.2rem;width:100%}}.modalShow{animation:animationShow .2s}.modalHide{animation:animationHide .25s;opacity:0;z-index:-1}@keyframes animationShow{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes animationHide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
|
|
5807
|
+
styleInject(css_248z$K);
|
|
5795
5808
|
|
|
5796
5809
|
const ModalContent = ({ CustomModalComponent, toCloseModal, customWidth = '', customHeight = '', leftAlignmentTitle, customHeaderClass, excludeHeader = false, title = '', subTitle = '', showButtonOne = false, showButtonTwo = false, sizeButtonOne = 'w-180', sizeButtonTwo = 'w-180', textButtonOne = 'Button Text', textButtonTwo = 'Button Text', modalSize = 'md', onClickButtonOne, onClickButtonTwo, onClickBackButton, buttonOneProps, buttonTwoProps, customClassButtonOne = '', customClassButtonTwo = '', customSubtitleClass, customModalContent, withoutHeaderCustomClass, noPadding, excludeCloseButton = false, stylesCustomHeaderProps, gradientBackground = false, customIconContainerClass, iconIllustration = false, iconIllustrationVariant = 'warning', iconIllustrationWidth = '5.8rem', customButtonsContainerClass = '', textBackButton }) => {
|
|
5797
5810
|
const defaultModalSize = 'md';
|
|
@@ -5817,8 +5830,8 @@ var TOAST_VARIANTS;
|
|
|
5817
5830
|
TOAST_VARIANTS["danger"] = "xCircle";
|
|
5818
5831
|
})(TOAST_VARIANTS || (TOAST_VARIANTS = {}));
|
|
5819
5832
|
|
|
5820
|
-
var css_248z$
|
|
5821
|
-
styleInject(css_248z$
|
|
5833
|
+
var css_248z$J = ".bordToastDS{align-items:center;-webkit-backdrop-filter:blur(3rem);backdrop-filter:blur(3rem);border-radius:.6rem;border-width:1px;color:var(--ds-c-content-default);display:flex;font-size:1.4rem;gap:1.6rem;justify-content:flex-start;line-height:2rem;padding:1.6rem;position:absolute;right:0;top:0;width:48rem}.bordToastDS.informative{--tw-border-opacity:1;background-color:#23a5ff1a;border-color:rgb(35 165 255/var(--tw-border-opacity))}.bordToastDS.informative .toastTitle{--tw-text-opacity:1;color:rgb(35 165 255/var(--tw-text-opacity))}.bordToastDS.informative svg path:not(.closeIcon path){stroke:#23a5ff}.bordToastDS.success{--tw-border-opacity:1;background-color:#09a4321a;border-color:rgb(0 153 79/var(--tw-border-opacity))}.bordToastDS.success .toastTitle{--tw-text-opacity:1;color:rgb(0 153 79/var(--tw-text-opacity))}.bordToastDS.success svg path:not(.closeIcon path){stroke:#00994f}.bordToastDS.warning{--tw-border-opacity:1;background-color:#dcc4101a;border-color:rgb(220 196 16/var(--tw-border-opacity))}.bordToastDS.warning .toastTitle{--tw-text-opacity:1;color:rgb(220 196 16/var(--tw-text-opacity))}.bordToastDS.warning svg path:not(.closeIcon path){stroke:#dcc410}.bordToastDS.danger{--tw-border-opacity:1;background-color:#fc543d1a;border-color:rgb(252 84 61/var(--tw-border-opacity))}.bordToastDS.danger .toastTitle{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordToastDS.danger svg path:not(.closeIcon path){stroke:#fc543d}.bordToastDS .twoButtonsContainer{align-items:center;display:flex;gap:.3rem;margin-top:1.6rem}.bordToastDS .toastTitle{color:var(--ds-c-content-default);font-size:1.6rem;font-weight:700;line-height:2.1rem;margin-bottom:.4rem}.bordToastDS .toastDescription{color:var(--ds-c-content-default);font-weight:400}.bordToastDS .toastData{display:flex;flex:1 1 0%;gap:1.6rem;justify-content:space-between;min-width:0}.bordToastDS .toastBody,.bordToastDS .toastTextBlock{flex:1 1 0%;min-width:0}.bordToastDS .toastTextBlock{overflow-wrap:break-word;word-break:break-word}.bordToastDS .toastVariantIcon{flex-shrink:0}.bordToastDS .toastCloseIcon{cursor:pointer;flex-shrink:0;height:1.8rem;min-width:1.8rem;width:1.8rem}@keyframes slideIn{0%{transform:translateX(336px)}to{transform:translateX(0)}}@keyframes fadeOut{to{opacity:0;z-index:-1}}.toastAnimation{-webkit-tap-highlight-color:transparent;animation:slideIn .5s ease-out,fadeOut .2s ease-out var(--toast-fadeout-start,2.3s) forwards;margin:16px;width:320px}.toastExit{animation:fadeOut .2s ease-out forwards}";
|
|
5834
|
+
styleInject(css_248z$J);
|
|
5822
5835
|
|
|
5823
5836
|
const BordToast = ({ variant = 'informative', title = '', description = '', onClose, action, actionLabelTwo, actionTwo, hideAction = true, actionLabel = 'action', customJSXMessage, animationTime = 2500, showAnimation = true }) => {
|
|
5824
5837
|
const handleClose = (e) => {
|
|
@@ -5846,8 +5859,8 @@ const BordToast = ({ variant = 'informative', title = '', description = '', onCl
|
|
|
5846
5859
|
return (jsxs("div", { className: className, style: animationStyle, onAnimationEnd: onAnimationEnd, onClick: handleClose, children: [jsx(BordOneToneIcon, { variant: TOAST_VARIANTS[variant], customWidth: "2.4rem", className: "toastVariantIcon h-full w-24 mb-auto flex-shrink-0" }), jsxs("div", { className: `toastData ${renderItemsPosition}`, children: [jsxs("div", { className: `toastBody ${renderStyles}`, children: [jsxs("div", { className: "toastTextBlock", children: [!!customJSXMessage && customJSXMessage, !customJSXMessage && (jsxs(Fragment, { children: [jsx("div", { className: "toastTitle", children: title }), jsx("div", { className: "toastDescription", children: description })] }))] }), !hideAction && renderButtons] }), jsx(BordOneToneIcon, { variant: "x", customWidth: "1.8rem", className: "closeIcon toastCloseIcon" })] })] }));
|
|
5847
5860
|
};
|
|
5848
5861
|
|
|
5849
|
-
var css_248z$
|
|
5850
|
-
styleInject(css_248z$
|
|
5862
|
+
var css_248z$I = ".bordMetricCards{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2.4rem}.bordMetricCardsConcatenatedRoot{width:auto}.bordMetricCardsGroup{display:flex;flex-direction:row;gap:.8rem;min-width:0;width:100%}@media (min-width:1024px){.bordMetricCardsGroup{width:118rem}}@media (max-width:1022.4px){.bordMetricCardsGroup{width:97.2rem}}.bordMetricCardsGroupParent{flex-shrink:0}@media (max-width:1022.4px){.bordMetricCardsGroupParent{width:31.2rem}}@media (min-width:1024px){.bordMetricCardsGroupParent{flex-shrink:0;width:57.55rem}}.bordMetricCardsGroupCards{justify-content:space-between}.bordMetricCardsConcatenatedInner,.bordMetricCardsGroupCards{display:flex;flex:1 1 0%;min-width:0}.bordMetricCardsConcatenatedInner{background-color:var(--ds-c-layout-l1);border-color:var(--ds-c-stroke-default);border-radius:.8rem;border-width:1px;box-sizing:border-box;flex-wrap:nowrap;width:100%}@media (max-width:1022.4px){.bordMetricCardsConcatenatedInner{height:6.4rem;min-height:6.4rem}}@media (min-width:1024px){.bordMetricCardsConcatenatedInner{height:8.4rem;min-height:8.4rem}}.bordMetricCardsConcatenatedInner{align-items:center}.bordMetricCardsConcatenatedInner .bordMetricCard{align-self:stretch;border:none;border-radius:.8rem;flex:1 0 0;height:100%;min-height:0;min-width:0;min-width:17.4rem;padding:1.2rem 0;width:auto}.bordMetricCardsConcatenatedInner .bordMetricCard .bordMetricCardMetricContent{justify-content:space-between;width:100%}.bordMetricCardsConcatenatedInner .bordMetricCard .bordMetricCardIcon{height:3.2rem;width:3.2rem}.bordMetricCardsConcatenatedInner .bordMetricCard .bordMetricCardSubvalue,.bordMetricCardsConcatenatedInner .bordMetricCard .bordMetricCardValue{font-size:1.6rem;line-height:1.25}.bordMetricCardsDivider{min-height:2rem;width:.1rem}@media (max-width:1022.4px){.bordMetricCardsDivider{height:4rem;min-height:4rem}}@media (min-width:1024px){.bordMetricCardsDivider{height:6rem;min-height:6rem}}.bordMetricCardsDivider{align-self:center;background-color:var(--ds-c-stroke-interactive);flex-shrink:0}";
|
|
5863
|
+
styleInject(css_248z$I);
|
|
5851
5864
|
|
|
5852
5865
|
const resolveConcatenatedParentColorVariant = (item) => {
|
|
5853
5866
|
const { icon, colorVariant } = item;
|
|
@@ -5886,8 +5899,8 @@ var CTA_TYPE;
|
|
|
5886
5899
|
CTA_TYPE["twoCta"] = "twoCta";
|
|
5887
5900
|
})(CTA_TYPE || (CTA_TYPE = {}));
|
|
5888
5901
|
|
|
5889
|
-
var css_248z$
|
|
5890
|
-
styleInject(css_248z$
|
|
5902
|
+
var css_248z$H = ".bordTooltipDS{position:relative}.bordTooltipDS,.bordTooltipMessageDS{color:var(--ds-c-content-default);display:flex;width:-moz-max-content;width:max-content}.bordTooltipMessageDS{--tw-border-opacity:1;background-color:var(--ds-c-layout-l2);border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-style:solid;border-width:.5px;flex-direction:column;font-size:1.2rem;gap:.8rem;line-height:1.6rem;max-width:50rem;min-width:18rem;opacity:0;padding:.8rem;position:absolute;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .bordTooltipMessageDS{opacity:1}.bordTooltipMessageDS.tooltipTop{bottom:100%;margin-bottom:.2rem}.bordTooltipMessageDS.tooltipBottom,.bordTooltipMessageDS.tooltipTop{--tw-translate-x:-50%;left:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bordTooltipMessageDS.tooltipBottom{margin-top:.2rem;top:100%}.bordTooltipMessageDS.tooltipLeft{margin-right:.2rem;right:100%}.bordTooltipMessageDS.tooltipLeft,.bordTooltipMessageDS.tooltipRight{--tw-translate-y:-50%;top:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bordTooltipMessageDS.tooltipRight{left:100%;margin-left:.2rem}.bordTooltipMessageDS.tooltipBottomLeft{bottom:0;left:0;transform:translateY(100%)}.bordTooltipMessageDS.tooltipBottomRight{bottom:0;right:0;transform:translateY(100%)}.bordTooltipMessageDS .ctaDivider{--tw-bg-opacity:1;background-color:rgb(98 108 130/var(--tw-bg-opacity));height:1px;margin-bottom:.2rem;margin-top:.2rem;opacity:.3;width:100%}.bordTooltipMessageDS .oneCta{align-items:center;cursor:pointer;display:flex;gap:.2rem;justify-content:center}.bordTooltipMessageDS .oneCta svg path{stroke:#22cfab}.bordTooltipMessageDS .twoCta{align-items:center;display:flex;justify-content:space-between}.bordTooltipMessageDS .twoCtaFirstButton,.bordTooltipMessageDS .twoCtaSecondButton{--tw-bg-opacity:1;background-color:rgb(64 150 240/var(--tw-bg-opacity));border-radius:.4rem;padding:.1rem .2rem}.bordTooltipMessageDS .title{color:var(--ds-c-content-default);font-size:1.4rem;font-weight:500}.bordTooltipMessageDS .messageText{opacity:1}.bordTooltipMessageDS .title+.messageText{opacity:.75}";
|
|
5903
|
+
styleInject(css_248z$H);
|
|
5891
5904
|
|
|
5892
5905
|
const BordTooltip = ({ title, message, position = 'top', children, ctaType = CTA_TYPE.noCta, ctaLabel, oneCtaVariant, ctaAction, ctaButtonOneLabel, ctaButtonOneAction, ctaButtonTwoLabel, ctaButtonTwoAction, customClassName = '', customClassNameMessageContainer = '', }) => {
|
|
5893
5906
|
const positionClasses = {
|
|
@@ -5907,8 +5920,8 @@ const BordTooltip = ({ title, message, position = 'top', children, ctaType = CTA
|
|
|
5907
5920
|
return (jsxs("div", { className: `bordTooltipDS group ${customClassName}`, children: [children, jsxs("div", { className: `bordTooltipMessageDS ${customClassNameMessageContainer} ${positionClasses[position]}`, children: [title && jsx("div", { className: "title", children: title }), jsx("div", { className: "messageText", children: message }), ctaType !== CTA_TYPE.noCta && jsx("div", { className: "ctaDivider" }), ctaComponents[ctaType]] })] }));
|
|
5908
5921
|
};
|
|
5909
5922
|
|
|
5910
|
-
var css_248z$
|
|
5911
|
-
styleInject(css_248z$
|
|
5923
|
+
var css_248z$G = ".bordRadioButtonDS{align-items:center;cursor:pointer;display:flex;gap:.8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordRadioButtonDS .bordRadioButtonLabel{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.4rem;line-height:1.8rem}.bordRadioButtonDS .bordRadioButtonSvg .largeRect{fill:#c6c7cb}.bordRadioButtonDS .bordRadioButtonSvg .innerCircle,.bordRadioButtonDS .bordRadioButtonSvg .smallRect{fill:#070f21}.bordRadioButtonDS.active .bordRadioButtonSvg .largeRect{fill:#22cfab}.bordRadioButtonDS.active .bordRadioButtonSvg .smallRect{fill:#070f21}.bordRadioButtonDS.active .bordRadioButtonSvg .innerCircle{fill:#22cfab}.bordRadioButtonDS.active .bordRadioButtonLabel{--tw-text-opacity:1;color:rgb(34 207 171/var(--tw-text-opacity))}.bordRadioButtonDS.inactive .bordRadioButtonSvg .largeRect{fill:#626c82}.bordRadioButtonDS.inactive .bordRadioButtonSvg .smallRect{fill:#070f21}.bordRadioButtonDS.inactive .bordRadioButtonSvg .innerCircle{fill:#626c82}.bordRadioButtonDS.inactive .bordRadioButtonLabel{--tw-text-opacity:1;color:rgb(38 43 57/var(--tw-text-opacity))}.bordRadioButtonDS.disabled{cursor:not-allowed}.bordRadioButtonDS.disabled .bordRadioButtonSvg .largeRect{fill:#626c82}.bordRadioButtonDS.disabled .bordRadioButtonSvg .innerCircle,.bordRadioButtonDS.disabled .bordRadioButtonSvg .smallRect{fill:#262b39}.bordRadioButtonDS.disabled .bordRadioButtonLabel{--tw-text-opacity:1;color:rgb(38 43 57/var(--tw-text-opacity))}.bordRadioButtonDS.disabled.active .innerCircle{fill:#626c82}";
|
|
5924
|
+
styleInject(css_248z$G);
|
|
5912
5925
|
|
|
5913
5926
|
/**
|
|
5914
5927
|
* RadioButtonSvg component
|
|
@@ -5958,8 +5971,8 @@ const BordRadioButton = ({ onClick, componentSize, isButtonActive, label, custom
|
|
|
5958
5971
|
return (jsxs("div", { className: classnames, onClick: handleClick, ...rest, children: [jsx(RadioButtonSvg, { customSize: customWidth, isActive: styleIsButtonActive, isDisabled: styleIsDisabled, isInactive: styleIsButtonActiveAndDisabled, svgProps: svgProps }), label && (jsx("p", { className: `bordRadioButtonLabel`, ...labelProps, children: label }))] }));
|
|
5959
5972
|
};
|
|
5960
5973
|
|
|
5961
|
-
var css_248z$
|
|
5962
|
-
styleInject(css_248z$
|
|
5974
|
+
var css_248z$F = ".bordSortSelect{align-items:flex-start;color:var(--ds-c-content-secondary);display:inline-flex;flex-direction:column;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordSortSelect.active .bordSortSelectTrigger,.bordSortSelect.opened .bordSortSelectTrigger{color:var(--ds-c-content-default)}.bordSortSelect.disabled{cursor:not-allowed;opacity:.5}.bordSortSelect .bordSortSelectTrigger{align-items:center;background-color:transparent;border-width:0;cursor:pointer;display:inline-flex;outline:2px solid transparent;outline-offset:2px;padding:0;text-align:left}.bordSortSelect .bordSortSelectTriggerLabel{align-items:center;color:var(--ds-c-content-default);display:inline-flex;font-size:1.4rem;font-weight:500;gap:.6rem;line-height:1.25rem}.bordSortSelect .bordSortSelectDirectionIcon{align-items:center;display:flex;flex-shrink:0;justify-content:center}.bordSortSelect .bordSortSelectDirectionIcon .bordOneToneIcon svg path{stroke:currentColor}.bordSortSelect .bordSortSelectPanel{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;background-color:var(--ds-c-layout-l1);border-color:var(--ds-c-stroke-interactive);border-radius:.8rem;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);left:0;margin-top:.8rem;padding:.8rem .6rem .8rem .4rem;position:absolute;top:100%;width:21.6rem;z-index:20}.bordSortSelect .bordSortSelectPanel--alignEnd{left:auto;right:0}.bordSortSelect .bordSortSelectSection{display:flex;flex-direction:column;padding-bottom:.4rem;padding-top:.4rem}.bordSortSelect .bordSortSelectSectionTitle{color:var(--ds-c-content-default);font-size:1.2rem;font-weight:700;line-height:1.25rem;margin-bottom:1.2rem;padding:.4rem}.bordSortSelect .bordSortSelectRadios{display:flex;flex-direction:column;gap:.8rem;padding-left:.4rem}.bordSortSelect .bordSortSelectPanel .bordRadioButton:not(.active) .bordRadioButtonLabel{color:var(--ds-c-content-secondary)}.bordSortSelect .bordSortSelectPanel .bordRadioButton.active .bordRadioButtonLabel{--tw-text-opacity:1;color:rgb(34 207 171/var(--tw-text-opacity))}.bordSortSelect .bordSortSelectPanel .bordRadioButton.disabled .bordRadioButtonLabel{color:var(--ds-c-bool-disabled-fg)}.bordSortSelect .bordSortSelectPanel .bordRadioButton:not(.active):not(.disabled) .bordRadioButtonSvg .largeRect{fill:var(--ds-c-content-secondary)}.bordSortSelect .bordSortSelectPanel .bordRadioButton:not(.active):not(.disabled) .bordRadioButtonSvg .innerCircle,.bordSortSelect .bordSortSelectPanel .bordRadioButton:not(.active):not(.disabled) .bordRadioButtonSvg .smallRect{fill:var(--ds-c-layout-l1)}.bordSortSelect .bordSortSelectPanel .bordRadioButton.active:not(.disabled) .bordRadioButtonSvg .largeRect{fill:#22cfab}.bordSortSelect .bordSortSelectPanel .bordRadioButton.active:not(.disabled) .bordRadioButtonSvg .smallRect{fill:var(--ds-c-layout-l1)}.bordSortSelect .bordSortSelectPanel .bordRadioButton.active:not(.disabled) .bordRadioButtonSvg .innerCircle{fill:#22cfab}";
|
|
5975
|
+
styleInject(css_248z$F);
|
|
5963
5976
|
|
|
5964
5977
|
const BordSortSelect = ({ triggerLabel, sortByOptions, selectedSortById, order, isOpen, onOpenChange, onSortByChange, onOrderChange, sortBySectionLabel = 'Ordenar por:', orderSectionLabel = 'Orden:', orderAscLabel = 'Ascendente (A-Z)', orderDescLabel = 'Descendente (Z-A)', isActive, disabled = false, className = '', panelAlign = 'start', }) => {
|
|
5965
5978
|
const rootRef = useRef(null);
|
|
@@ -5993,8 +6006,8 @@ const BordSortSelect = ({ triggerLabel, sortByOptions, selectedSortById, order,
|
|
|
5993
6006
|
return (jsxs("div", { ref: rootRef, className: classnames, children: [jsx("button", { type: "button", className: "bordSortSelectTrigger", onClick: toggleOpen, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-disabled": disabled, children: jsxs("span", { className: "bordSortSelectTriggerLabel", children: [jsx("span", { className: "truncate", children: triggerLabel }), jsx("span", { className: "bordSortSelectDirectionIcon", "aria-hidden": true, children: jsx(BordOneToneIcon, { variant: directionIconVariant, standardSize: 18 }) })] }) }), isOpen && (jsxs("div", { className: `bordSortSelectPanel ${panelAlign === 'end' ? 'bordSortSelectPanel--alignEnd' : ''}`, role: "presentation", onMouseDown: (e) => e.stopPropagation(), children: [jsxs("div", { className: "bordSortSelectSection", children: [jsx("div", { className: "bordSortSelectSectionTitle", children: sortBySectionLabel }), jsx("div", { className: "bordSortSelectRadios", children: sortByOptions.map((option) => (jsx(BordRadioButton, { componentSize: "small", label: option.label, isButtonActive: selectedSortById === option.id, onClick: () => onSortByChange(option.id) }, option.id))) })] }), jsxs("div", { className: "bordSortSelectSection", children: [jsx("div", { className: "bordSortSelectSectionTitle", children: orderSectionLabel }), jsxs("div", { className: "bordSortSelectRadios", children: [jsx(BordRadioButton, { componentSize: "small", label: orderAscLabel, isButtonActive: order === 'asc', onClick: () => onOrderChange('asc') }), jsx(BordRadioButton, { componentSize: "small", label: orderDescLabel, isButtonActive: order === 'desc', onClick: () => onOrderChange('desc') })] })] })] }))] }));
|
|
5994
6007
|
};
|
|
5995
6008
|
|
|
5996
|
-
var css_248z$
|
|
5997
|
-
styleInject(css_248z$
|
|
6009
|
+
var css_248z$E = ".bordEmptyStateDS{align-items:center;display:flex;flex-direction:column;gap:2.4rem;text-align:center}.bordEmptyStateDS .titleAndSubTitleContainer{max-width:58rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content}.bordEmptyStateDS .titleAndSubTitleContainer .title{color:var(--ds-c-content-default);font-size:2rem;font-weight:700;line-height:2.6rem}.bordEmptyStateDS .titleAndSubTitleContainer .subTitle{color:var(--ds-c-content-secondary);font-size:1.6rem;font-weight:400;line-height:2.1rem;margin-top:.8rem}.bordEmptyStateDS .buttonsContainer{align-items:center;display:flex;gap:1.2rem}";
|
|
6010
|
+
styleInject(css_248z$E);
|
|
5998
6011
|
|
|
5999
6012
|
const BordEmptyState = ({ title = 'title', subTitle, customClassNameTitle = '', customClassNameSubTitle = '', buttonOneProps, buttonTwoProps, ilustrationIconProps, oneToneIconProps, twoToneIconProps, }) => {
|
|
6000
6013
|
const defaultIcon = 'search';
|
|
@@ -6012,8 +6025,8 @@ const BordEmptyState = ({ title = 'title', subTitle, customClassNameTitle = '',
|
|
|
6012
6025
|
return (jsxs("div", { className: "bordEmptyStateDS", children: [ilustration, jsxs("div", { className: "titleAndSubTitleContainer", children: [jsx("div", { className: `title ${customClassNameTitle}`, children: title }), subTitle && jsx("div", { className: `subTitle ${customClassNameSubTitle}`, children: subTitle })] }), jsxs("div", { className: "buttonsContainer", children: [buttonOneProps && jsx(BordButton, { ...buttonOneProps }), buttonTwoProps && jsx(BordButton, { ...buttonTwoProps })] })] }));
|
|
6013
6026
|
};
|
|
6014
6027
|
|
|
6015
|
-
var css_248z$
|
|
6016
|
-
styleInject(css_248z$
|
|
6028
|
+
var css_248z$D = ".dsSwitchRoot{background-color:transparent;border-color:var(--ds-c-stroke-default);border-radius:4rem;border-style:solid;border-width:1px;border-width:.1rem;cursor:pointer;flex-shrink:0;height:2.2rem;position:relative;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);width:5.6rem}.dsSwitchRoot:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:2px;--tw-ring-color:var(--ds-c-primary-bg-default);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid transparent;outline-offset:2px}.dsSwitchRoot:disabled{border-color:var(--ds-c-bool-disabled-bg);cursor:not-allowed;opacity:.5}.dsSwitchThumb{border-radius:15998.4rem;display:grid;height:1.6rem;left:.2rem;overflow:hidden;padding:0;place-items:center;position:absolute;top:50%;transform:translateY(-50%);transition:transform .2s ease-out,background-color .2s ease-out,color .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.6rem}.dsSwitchRoot:not(.dsSwitchRootOn) .dsSwitchThumb{background-color:var(--ds-c-stroke-default);color:var(--ds-c-content-secondary)}.dsSwitchRootOn .dsSwitchThumb{background-color:var(--ds-c-primary-bg-default);color:var(--ds-c-secondary-bg-default);transform:translateY(-50%) translateX(3.4rem)}.dsSwitchThumbLabel{align-items:center;color:inherit;display:flex;font-size:.8rem;font-weight:600;height:100%;justify-content:center;line-height:1;margin:0;text-align:center;width:100%}.dsSwitchSkeleton{background-color:var(--ds-c-stroke-default);border-radius:4rem;flex-shrink:0;height:2.2rem;pointer-events:none;width:5.6rem}";
|
|
6029
|
+
styleInject(css_248z$D);
|
|
6017
6030
|
|
|
6018
6031
|
const BordSwitch = ({ checked = false, onChange, disabled = false, isLoading = false, variant = 'labeled', onLabel = 'Si', offLabel = 'No', onClick, className = '', ...rest }) => {
|
|
6019
6032
|
const isLabeledVariant = variant === 'labeled';
|
|
@@ -6035,8 +6048,8 @@ const getArrowVariant = (isOpen, resolvedSide) => {
|
|
|
6035
6048
|
return pointingUp ? 'arrowHeadUp' : 'arrowHeadDown';
|
|
6036
6049
|
};
|
|
6037
6050
|
|
|
6038
|
-
var css_248z$
|
|
6039
|
-
styleInject(css_248z$
|
|
6051
|
+
var css_248z$C = ".bordSelectLabel{display:block;margin-bottom:.4rem}.bordSelectLabel,.bordSelectTriggerDefault{color:var(--ds-c-content-default);font-size:1.2rem;line-height:1.5rem}.bordSelectTriggerDefault{align-items:center;background-color:var(--ds-c-layout-bg);border-color:var(--ds-c-stroke-interactive);border-radius:.6rem;border-style:solid;border-width:1px;cursor:pointer;display:flex;font-weight:400;gap:.8rem;height:4rem;justify-content:space-between;padding:0 1.6rem;text-align:left;width:100%}.bordSelectTriggerDefault:hover:not(:disabled){border-color:var(--ds-c-primary-bg-hover)}.bordSelectTriggerDefault:focus:not(:disabled){--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:2px;--tw-ring-color:var(--ds-c-primary-bg-default);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid transparent;outline-offset:2px}.bordSelectTriggerDefault:disabled{border-color:var(--ds-c-bool-disabled-bg);cursor:not-allowed;opacity:.6}.bordSelectTriggerDefault .bordOneToneIcon svg path{stroke:currentColor}.bordSelectTriggerBare{align-items:center;border-width:0;color:var(--ds-c-content-default);cursor:pointer;display:flex;font-size:1.4rem;gap:.4rem;line-height:1.8rem;overflow:hidden;padding:0;text-align:left;width:100%}.bordSelectTriggerBare .bordSelectTriggerIcon .bordOneToneIcon svg path{stroke:currentColor}.bordSelectTriggerBare:disabled{color:var(--ds-c-bool-disabled-fg);cursor:not-allowed;opacity:.6}.bordSelectTriggerBareText,.bordSelectTriggerText{flex:1 1 0%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordSelectTriggerBareText{text-align:end}.bordSelectTriggerPlaceholder{color:var(--ds-c-content-secondary)}.bordSelectTriggerIcon{flex-shrink:0;transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordSelectTriggerIcon .bordOneToneIcon{align-items:center;color:inherit;display:flex;justify-content:center}";
|
|
6052
|
+
styleInject(css_248z$C);
|
|
6040
6053
|
|
|
6041
6054
|
const BordSelectTriggerDefault = ({ triggerRef, isOpen, onToggle, disabled, displayLabel, isPlaceholder, label, resolvedSide = 'bottom', triggerWidth, }) => (jsxs(Fragment, { children: [label ? jsx("span", { className: "bordSelectLabel", children: label }) : null, jsxs("button", { ref: triggerRef, type: "button", className: "bordSelectTriggerDefault", style: triggerWidth ? { width: triggerWidth, maxWidth: triggerWidth } : undefined, disabled: disabled, onClick: onToggle, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: `bordSelectTriggerText ${isPlaceholder ? 'bordSelectTriggerPlaceholder' : ''}`, children: displayLabel }), jsx(BordOneToneIcon, { variant: getArrowVariant(isOpen, resolvedSide), standardSize: 16, stroke: bordColorTheme.stroke.default, className: "bordSelectTriggerIcon" })] })] }));
|
|
6042
6055
|
const BordSelectTriggerBare = ({ triggerRef, isOpen, onToggle, disabled, displayLabel, isPlaceholder, resolvedSide = 'bottom', triggerWidth, }) => (jsxs("button", { ref: triggerRef, type: "button", className: "bordSelectTriggerBare", style: triggerWidth ? { width: triggerWidth, maxWidth: triggerWidth } : undefined, disabled: disabled, onClick: onToggle, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: `bordSelectTriggerBareText ${isPlaceholder ? 'bordSelectTriggerPlaceholder' : ''}`, children: displayLabel }), jsx(BordOneToneIcon, { variant: getArrowVariant(isOpen, resolvedSide), standardSize: 16, stroke: "currentColor", className: "bordSelectTriggerIcon" })] }));
|
|
@@ -6120,8 +6133,8 @@ const useFloatingMenu = ({ triggerRef, isOpen, onClose, gap = 4, side = 'bottom'
|
|
|
6120
6133
|
return { listRect, portalRef };
|
|
6121
6134
|
};
|
|
6122
6135
|
|
|
6123
|
-
var css_248z$
|
|
6124
|
-
styleInject(css_248z$
|
|
6136
|
+
var css_248z$B = "@keyframes bordSelectFadeIn{0%{opacity:0;transform:scaleY(.96)}to{opacity:1;transform:scaleY(1)}}.bordSelectDropdownListFloating{--tw-shadow:0 0.4rem 0.5rem rgba(0,0,0,.08);--tw-shadow-colored:0 0.4rem 0.5rem var(--tw-shadow-color);animation:bordSelectFadeIn .3s ease;background-color:var(--ds-c-layout-bg);border-color:var(--ds-c-stroke-interactive);border-radius:.6rem;border-style:solid;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-sizing:border-box;overflow:hidden;padding:.8rem .6rem .8rem .4rem;position:fixed;transform-origin:top center}.bordSelectDropdownListFloatingList{display:grid;gap:0;list-style-type:none;overflow-y:auto}.bordSelectDropdownListFloatingList::-webkit-scrollbar{height:.2rem;width:.2rem}.bordSelectDropdownListFloatingList::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.bordSelectDropdownListFloatingList::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}";
|
|
6137
|
+
styleInject(css_248z$B);
|
|
6125
6138
|
|
|
6126
6139
|
const LIST_PORTAL_Z_INDEX = 10000;
|
|
6127
6140
|
const BordSelectDropdown = ({ isOpen, onClose, triggerRef, children, width, maxHeight = 320, align = 'start', side = 'bottom', className = '', }) => {
|
|
@@ -6156,8 +6169,8 @@ const BordSelectDropdown = ({ isOpen, onClose, triggerRef, children, width, maxH
|
|
|
6156
6169
|
}, children: jsx("ul", { className: "bordSelectDropdownListFloatingList", style: { maxHeight }, children: children }) }), document.body);
|
|
6157
6170
|
};
|
|
6158
6171
|
|
|
6159
|
-
var css_248z$
|
|
6160
|
-
styleInject(css_248z$
|
|
6172
|
+
var css_248z$A = ".bordSelectIndicator{align-items:center;background-color:var(--ds-c-layout-bg);border-color:var(--ds-c-content-secondary);border-style:solid;border-width:1px;display:flex;flex-shrink:0;height:1.6rem;justify-content:center;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1.6rem}.bordSelectIndicatorRadio{border-radius:15998.4rem}.bordSelectIndicatorCheckbox{border-radius:.2rem}.bordSelectIndicatorSelected{border-color:var(--ds-c-primary-bg-default)}.bordSelectRadioDot{background-color:var(--ds-c-primary-bg-default);border-radius:15998.4rem;display:block;height:.8rem;width:.8rem}.bordSelectCheckMark{border-bottom:2px solid var(--ds-c-primary-bg-default);border-right:2px solid var(--ds-c-primary-bg-default);display:block;height:1rem;position:relative;top:-2px;transform:rotate(45deg);width:.6rem}";
|
|
6173
|
+
styleInject(css_248z$A);
|
|
6161
6174
|
|
|
6162
6175
|
const SelectIndicator = ({ multiple, isSelected, placement }) => {
|
|
6163
6176
|
if (placement === 'none')
|
|
@@ -6168,8 +6181,8 @@ const SelectIndicator = ({ multiple, isSelected, placement }) => {
|
|
|
6168
6181
|
return (jsx("span", { className: `bordSelectIndicator bordSelectIndicatorRadio ${isSelected ? 'bordSelectIndicatorSelected' : ''}`, children: isSelected ? jsx("span", { className: "bordSelectRadioDot" }) : null }));
|
|
6169
6182
|
};
|
|
6170
6183
|
|
|
6171
|
-
var css_248z$
|
|
6172
|
-
styleInject(css_248z$
|
|
6184
|
+
var css_248z$z = ".bordSelectRoot{position:relative;width:100%}.bordSelectSkeletonText{background-color:var(--ds-c-stroke-default);border-radius:.4rem;display:block;height:1.2rem;width:4rem}.bordSelectSkeletonTrigger{border-radius:.6rem;height:4rem;width:100%}.bordSelectOption{margin:0;padding:0}.bordSelectOptionButton{background-color:transparent;border-radius:.6rem;border-width:0;cursor:pointer;padding:.4rem;text-align:left;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.bordSelectOptionButton:hover{background-color:var(--ds-c-layout-l2)}.bordSelectOptionContent{align-items:center;display:flex;gap:.4rem}.bordSelectOptionContent.bordSelectOptionContentEnd{flex-direction:row-reverse;justify-content:space-between}.bordSelectOptionTexts{display:grid;gap:.2rem;min-width:0}.bordSelectOptionTitle{color:var(--ds-c-content-secondary);font-size:1.4rem;line-height:1.8rem}.bordSelectOptionButtonSelected .bordSelectOptionTitle{color:var(--ds-c-primary-bg-default)}.bordSelectOptionTextsWithDescription .bordSelectOptionTitle{color:var(--ds-c-content-default)}.bordSelectOptionButtonSelected .bordSelectOptionTextsWithDescription .bordSelectOptionTitle{color:var(--ds-c-primary-bg-default)}.bordSelectOptionDescription{color:var(--ds-c-content-secondary);font-size:1rem;font-weight:400;line-height:1.3rem}";
|
|
6185
|
+
styleInject(css_248z$z);
|
|
6173
6186
|
|
|
6174
6187
|
const BordSelect = props => {
|
|
6175
6188
|
const { label, options, value, onChange, multiple = false, disabled = false, isLoading = false, className = '', placeholder = 'Selecciona una opción', dropdownWidth = 220, dropdownMaxHeight = 350, dropdownAlign = 'start', dropdownSide = 'bottom', triggerVariant = 'default', triggerWidth = 220, indicatorPlacement = 'none', } = props;
|
|
@@ -6233,8 +6246,8 @@ const BordSelect = props => {
|
|
|
6233
6246
|
}) })] }));
|
|
6234
6247
|
};
|
|
6235
6248
|
|
|
6236
|
-
var css_248z$
|
|
6237
|
-
styleInject(css_248z$
|
|
6249
|
+
var css_248z$y = ".bordUploaderButtonDS .loaderTextClass{border-radius:.2rem;height:1.6rem;width:10rem}.bordUploaderButtonDS .labelBordUploaderButton{color:var(--ds-c-content-default);font-size:1.2rem;line-height:1.6rem;margin-bottom:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordUploaderButtonDS .labelBordUploaderButton.error{color:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .labelBordUploaderButton.disabled{color:var(--ds-c-bool-disabled-sec-fg)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer{height:6.4rem;position:relative;width:100%}.bordUploaderButtonDS .bordFilledUploaderButtonContainer .bordUploaderButtonSkeletonLoader{background-color:transparent;border-radius:.6rem;height:100%;pointer-events:none}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.stylesSharedBetweenStates{align-content:center;align-items:center;background-color:var(--ds-c-layout-bg);border-radius:.6rem;border-style:solid;border-width:1px;display:flex;justify-content:flex-start;padding-left:1.6rem;padding-right:1.6rem}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.stylesSharedBetweenStates .fileName{font-size:1.4rem;line-height:2rem;margin-left:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.stylesSharedBetweenStates .floatIconContainer{align-content:center;align-items:center;display:flex;height:100%;justify-content:flex-end;position:absolute;right:1.6rem;top:0;width:1.6rem}.bordUploaderButtonDS .bordFilledUploaderButtonContainer .buttonItemsContainer{align-content:center;align-items:center;display:flex;width:calc(100% - 30px)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.disabled{border-color:var(--ds-c-stroke-interactive);cursor:not-allowed}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.disabled .fileName{color:var(--ds-c-bool-disabled-sec-fg)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.disabled .floatIconContainer svg path{stroke:var(--ds-c-bool-disabled-sec-fg)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.default{border-color:var(--ds-c-primary-bg-default);cursor:pointer}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.default .fileName{color:var(--ds-c-content-default)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.default svg path{stroke:var(--ds-c-content-default)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.default .floatIconContainer{z-index:10}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.default .floatIconContainer svg path{stroke:var(--ds-c-content-secondary)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.error{border-color:var(--ds-c-bool-danger-fg);cursor:pointer}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.error .fileName{color:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.error svg path{stroke:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.error .floatIconContainer{z-index:10}.bordUploaderButtonDS .bordFilledUploaderButtonContainer.error .floatIconContainer svg path{stroke:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .bordUploaderButtonContainer{height:6.4rem;position:relative;width:100%}.bordUploaderButtonDS .bordUploaderButtonContainer .hideSystemInput{cursor:pointer;height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;width:100%}.bordUploaderButtonDS .bordUploaderButtonContainer .hideSystemInput::-webkit-file-upload-button{cursor:pointer}.bordUploaderButtonDS .bordUploaderButtonContainer .hideSystemInput.disabledFileButton{cursor:not-allowed}.bordUploaderButtonDS .bordUploaderButtonContainer .hideSystemInput.disabledFileButton::-webkit-file-upload-button{cursor:not-allowed}.bordUploaderButtonDS .bordUploaderButtonContainer.stylesSharedBetweenStates{align-content:center;align-items:center;border-radius:.6rem;border-style:dashed;border-width:1px;display:flex;justify-content:flex-start;padding-left:1.6rem;padding-right:1.6rem}.bordUploaderButtonDS .bordUploaderButtonContainer.stylesSharedBetweenStates .infoDetailsContainer{padding-left:1.6rem;width:calc(100% - 14px)}.bordUploaderButtonDS .bordUploaderButtonContainer.stylesSharedBetweenStates .infoDetailsContainer .title{font-size:1.4rem;line-height:1.8rem;margin-bottom:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordUploaderButtonDS .bordUploaderButtonContainer.stylesSharedBetweenStates .infoDetailsContainer .subtitle{font-size:1.2rem;line-height:1.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordUploaderButtonDS .bordUploaderButtonContainer.default{background-color:var(--ds-c-layout-bg);border-color:var(--ds-c-stroke-interactive)}.bordUploaderButtonDS .bordUploaderButtonContainer.default .infoDetailsContainer .title{color:var(--ds-c-content-default)}.bordUploaderButtonDS .bordUploaderButtonContainer.default .infoDetailsContainer .title .highlightedTitle{color:var(--ds-c-primary-bg-default)}.bordUploaderButtonDS .bordUploaderButtonContainer.default .infoDetailsContainer .subtitle{color:var(--ds-c-content-secondary)}.bordUploaderButtonDS .bordUploaderButtonContainer.default:hover{background-color:var(--ds-c-primary-bg-secondary);border-color:var(--ds-c-primary-bg-default)}.bordUploaderButtonDS .bordUploaderButtonContainer.error{background-color:var(--ds-c-layout-bg);border-color:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .bordUploaderButtonContainer.error svg path{stroke:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .bordUploaderButtonContainer.error .infoDetailsContainer .subtitle,.bordUploaderButtonDS .bordUploaderButtonContainer.error .infoDetailsContainer .title{color:var(--ds-c-bool-danger-fg)}.bordUploaderButtonDS .bordUploaderButtonContainer.disabled{background-color:var(--ds-c-bool-disabled-sec-bg);border-color:var(--ds-c-stroke-default)}.bordUploaderButtonDS .bordUploaderButtonContainer.disabled svg path{stroke:var(--ds-c-bool-disabled-sec-fg)}.bordUploaderButtonDS .bordUploaderButtonContainer.disabled .infoDetailsContainer .subtitle,.bordUploaderButtonDS .bordUploaderButtonContainer.disabled .infoDetailsContainer .title{color:var(--ds-c-bool-disabled-sec-fg)}.bordUploaderButtonDS .textError{color:var(--ds-c-bool-danger-fg);font-size:1rem;height:1.3rem;line-height:1.3rem;margin-top:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
6250
|
+
styleInject(css_248z$y);
|
|
6238
6251
|
|
|
6239
6252
|
const BordUploaderButton = ({ label, isFilled, bordUploaderButtonType, disabledBordUploaderButton, loading, errorText, emptyBordUploaderButtonTitle, emptyBordUploaderButtonSubtitle, defaultFile, handleChangeFile, handleDeleteFile, handleDownloadFile, customWidth, acceptFileExtension = ['.doc'], }) => {
|
|
6240
6253
|
const classnames = `bordUploaderButtonDS ${customWidth || 'w-380'}`;
|
|
@@ -6272,6 +6285,876 @@ const BordUploaderButton = ({ label, isFilled, bordUploaderButtonType, disabledB
|
|
|
6272
6285
|
}, accept: acceptFileExtension.join(',') })] }))] }));
|
|
6273
6286
|
};
|
|
6274
6287
|
|
|
6288
|
+
var css_248z$x = ".bordActionButtonDS{--tw-border-opacity:1;--tw-text-opacity:1;align-items:center;border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-width:2px;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:.8rem;width:14rem}.bordActionButtonDS:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(28 50 59/var(--tw-bg-opacity));border-color:rgb(34 207 171/var(--tw-border-opacity));border-width:2px;color:rgb(34 207 171/var(--tw-text-opacity))}.bordActionButtonDS:hover svg path{stroke:#22cfab}.bordActionButtonDS:disabled{--tw-text-opacity:1;cursor:not-allowed}.bordActionButtonDS:disabled,.bordActionButtonDS:disabled:hover{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity));color:rgb(98 108 130/var(--tw-text-opacity))}.bordActionButtonDS:disabled:hover{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity))}.bordActionButtonDS:disabled:hover svg path{stroke:#626c82}.bordActionButtonSubTitle{text-wrap:wrap;font-size:1.2rem;font-weight:400;line-height:1.5rem;margin-bottom:.2rem;margin-top:.8rem}.bordActionButtonTitle{text-wrap:wrap;font-size:1.4rem;font-weight:700;line-height:1.8rem}";
|
|
6289
|
+
styleInject(css_248z$x);
|
|
6290
|
+
|
|
6291
|
+
const BordActionButton = ({ variant = "figma", subTitle = "subTitle", title = "title", ...rest }) => {
|
|
6292
|
+
const iconDefault = "figma";
|
|
6293
|
+
return (jsxs("button", { className: "bordActionButtonDS", ...rest, children: [jsx(BordOneToneIcon, { variant: variant ?? iconDefault }), jsx("span", { className: "bordActionButtonSubTitle", children: subTitle }), jsx("span", { className: "bordActionButtonTitle", children: title })] }));
|
|
6294
|
+
};
|
|
6295
|
+
|
|
6296
|
+
var css_248z$w = ".bordBreadCrumbDS{align-items:center;cursor:pointer;display:flex;line-height:0}.bordBreadCrumbDS .bordHeaderBreadCrumb{align-items:center;display:flex;gap:.2rem;line-height:1.4rem}.bordBreadCrumbDS .bordHeaderBreadCrumb .bordFirstSectionTitle,.bordBreadCrumbDS .bordHeaderBreadCrumb .bordSecondSectionTitle{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.4rem;line-height:1.8rem}.bordBreadCrumbDS .headerBordSubtitle{font-weight:500;line-height:1.4rem}.bordBreadCrumbDS .headerBordSubtitle,.bordBreadCrumbDS .separatorCharacter{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.4rem}.bordBreadCrumbDS .separatorCharacter{line-height:1.8rem;margin-right:.2rem}";
|
|
6297
|
+
styleInject(css_248z$w);
|
|
6298
|
+
|
|
6299
|
+
const BordBreadCrumb = ({ headerNavigationTitle: title, headerNavigationSubtitle: subtitle, }) => {
|
|
6300
|
+
const separator = subtitle ? ' / ' : '';
|
|
6301
|
+
const [firstSection, secondSection = ''] = title.includes('-')
|
|
6302
|
+
? [title.split('-')[0], title.slice(title.indexOf('-'))]
|
|
6303
|
+
: [title];
|
|
6304
|
+
return (jsxs("div", { className: "bordBreadCrumbDS", children: [jsxs("div", { className: "bordHeaderBreadCrumb", children: [jsx("span", { className: "bordFirstSectionTitle", children: firstSection }), jsx("span", { className: "bordSecondSectionTitle", children: secondSection })] }), jsx("span", { className: "separatorCharacter", children: separator }), jsx("span", { className: "headerBordSubtitle", children: subtitle })] }));
|
|
6305
|
+
};
|
|
6306
|
+
|
|
6307
|
+
var css_248z$v = ".bordCellCard{overflow:hidden}";
|
|
6308
|
+
styleInject(css_248z$v);
|
|
6309
|
+
|
|
6310
|
+
/**
|
|
6311
|
+
* @description A card container component for cell items.
|
|
6312
|
+
* @prop {ReactNode} children - The cell items or groups to display.
|
|
6313
|
+
* @prop {string} [customClassName=""] - Add a custom class to the component.
|
|
6314
|
+
* @returns {React.ReactElement} A cell card component.
|
|
6315
|
+
*/
|
|
6316
|
+
const BordCellCard = (props) => {
|
|
6317
|
+
const { children, customClassName = "", ...restProps } = props;
|
|
6318
|
+
return (jsx("div", { className: `bordCellCard ${customClassName}`, ...restProps, children: children }));
|
|
6319
|
+
};
|
|
6320
|
+
|
|
6321
|
+
/**
|
|
6322
|
+
* Starting from a time offset returns a string to be used in luxon functions as the zone option
|
|
6323
|
+
* @param utcTimeOffset an integer between -12 and 14, corresponding to a valid UTC offset. If no value or an invalid value is provided the DEFAULT will be -6 (the time zone for México, by definition)
|
|
6324
|
+
* @returns a valid timezone to be used as the zone in luxon DateTime.fromISO function
|
|
6325
|
+
*/
|
|
6326
|
+
const getUtcOffsetForLuxon = (utcTimeOffset) => {
|
|
6327
|
+
const isValidTimeZone = typeof utcTimeOffset === "number" &&
|
|
6328
|
+
utcTimeOffset <= 14 &&
|
|
6329
|
+
utcTimeOffset >= -12;
|
|
6330
|
+
// range of valid utc zones was taken from https://en.wikipedia.org/wiki/List_of_UTC_offsets
|
|
6331
|
+
const integerTimeOffset = utcTimeOffset?.toFixed();
|
|
6332
|
+
const zoneNumber = utcTimeOffset && utcTimeOffset < 0
|
|
6333
|
+
? integerTimeOffset
|
|
6334
|
+
: `+${utcTimeOffset}`;
|
|
6335
|
+
const timeZone = isValidTimeZone ? `utc${zoneNumber}` : "utc-6";
|
|
6336
|
+
const timeZoneText = timeZone.replace("utc", "GMT");
|
|
6337
|
+
return { timeZone, timeZoneText };
|
|
6338
|
+
};
|
|
6339
|
+
/**
|
|
6340
|
+
* Takes a date and returns a datetime in the utc-0 timezone corresponding to the original date at 13:00 of the provided utcTimeOffset (default is utc-6, ie MX timezone)
|
|
6341
|
+
* @param dateValueIsoFormat a date in ISO format, eg ("2023-07-13")
|
|
6342
|
+
* @param utcTimeOffset an integer between -12 and 14, corresponding to a valid UTC offset. If no value or an invalid value is provided the DEFAULT will be utc-6 (ie MX timezone)
|
|
6343
|
+
* @returns a datetime in ISO string format in the utc (zulu-time) timezone. The date corresponds to the original date (choose to be at 13:00 of the utcTimeOffset or MX by default) transformed to the zulu (utc) time
|
|
6344
|
+
*/
|
|
6345
|
+
const convertSimpleDateToDateTimeZulu = (dateValueIsoFormat, utcTimeOffset) => {
|
|
6346
|
+
const dateWithHour = `${dateValueIsoFormat}T13:00:00.000`; // by definition all dates are set at 13:00 hours https://nudosplatform.atlassian.net/browse/NUD-2050
|
|
6347
|
+
const { timeZone } = getUtcOffsetForLuxon(utcTimeOffset);
|
|
6348
|
+
const dateTimeInOriginalZone = DateTime.fromISO(dateWithHour, {
|
|
6349
|
+
zone: timeZone || "utc",
|
|
6350
|
+
}).toString();
|
|
6351
|
+
const dateTimeInUTC0 = DateTime.fromISO(dateTimeInOriginalZone, {
|
|
6352
|
+
zone: "utc",
|
|
6353
|
+
}).toString();
|
|
6354
|
+
return dateTimeInUTC0;
|
|
6355
|
+
};
|
|
6356
|
+
/**
|
|
6357
|
+
* Takes a datetime in ISO format and transform it to its equivalent in the desired utc time zone (if no param is provided default is MX)
|
|
6358
|
+
* @param dateValueIsoFormat a string with a datetime in ISO format, eg ("2023-07-13T13:00:00.000Z")
|
|
6359
|
+
* @param utcTimeOffset an integer between -12 and 14, corresponding to a valid UTC offset. If no value or an invalid value is provided the DEFAULT will be utc-6 (ie MX timezone)
|
|
6360
|
+
* @returns The original datetime in ISO string format TRANSFORMED to the desired utcTimeOffset (DEFAULT is utc-6).
|
|
6361
|
+
*/
|
|
6362
|
+
const displayDateInChosenTimeZone = (dateValueIsoFormat, utcTimeOffset) => {
|
|
6363
|
+
const { timeZone } = getUtcOffsetForLuxon(utcTimeOffset);
|
|
6364
|
+
const dateInDesiredTimeZone = DateTime.fromISO(dateValueIsoFormat, {
|
|
6365
|
+
zone: timeZone,
|
|
6366
|
+
}).toString();
|
|
6367
|
+
return dateInDesiredTimeZone;
|
|
6368
|
+
};
|
|
6369
|
+
/**
|
|
6370
|
+
* Takes a datetime in ISO format and returns a formatted date in the desired utc time zone to be passed as value to an html input of type date
|
|
6371
|
+
* @param dateValueIsoFormat a string with a date in ISO format, eg ("2023-07-13")
|
|
6372
|
+
* @param utcTimeOffset an integer between -12 and 14, corresponding to a valid UTC offset. If no value or an invalid value is provided the DEFAULT will be 0 (ie utc or zulu time)
|
|
6373
|
+
* @returns The date in the utcTimeOffset time zone (DEFAULT is utc-0) TRANSFORMED to a format accepted by an HTML input element of type date
|
|
6374
|
+
*/
|
|
6375
|
+
const formatDateToPicker = (dateValueIsoFormat, utcTimeOffset) => {
|
|
6376
|
+
if (!dateValueIsoFormat)
|
|
6377
|
+
return undefined;
|
|
6378
|
+
const dateInAppropiateTimeZone = displayDateInChosenTimeZone(dateValueIsoFormat, utcTimeOffset);
|
|
6379
|
+
const formattedDate = DateTime.fromISO(dateInAppropiateTimeZone).toFormat("yyyy-LL-dd");
|
|
6380
|
+
return formattedDate;
|
|
6381
|
+
};
|
|
6382
|
+
|
|
6383
|
+
var css_248z$u = ".bordDatePickerDS .bordDatePickerLabel{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));display:block;font-size:1.2rem;line-height:1.5rem;margin-bottom:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordDatePickerDS input{--tw-border-opacity:1;--tw-text-opacity:1;background-color:transparent;border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-style:solid;border-width:1px;color:rgb(98 108 130/var(--tw-text-opacity));font-size:1.4rem;height:4rem;line-height:1.8rem;line-height:1;padding-left:1.6rem;padding-right:1.6rem;width:100%}.bordDatePickerDS input::-moz-placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));font-size:1.4rem;line-height:.75rem}.bordDatePickerDS input::placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));font-size:1.4rem;line-height:.75rem}.bordDatePickerDS input:hover{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer}.bordDatePickerDS input:focus{outline:2px solid transparent;outline-offset:2px}.bordDatePickerDS input:active,.bordDatePickerDS input:focus{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(34 207 171/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.bordDatePickerDS input::-webkit-calendar-picker-indicator{background-image:url(../../assets/CalendarInactiveIcon.svg)}.bordDatePickerDS .errorText{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity));font-size:1rem;line-height:1.302rem;margin-top:.2rem}.bordDatePickerDS.filled .bordDatePickerLabel{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordDatePickerDS.filled input{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(38 43 57/var(--tw-border-opacity));color:rgb(98 108 130/var(--tw-text-opacity))}.bordDatePickerDS.filled input::-webkit-calendar-picker-indicator{background-image:url(../../assets/CalendarActiveIcon.svg)}.bordDatePickerDS.error .bordDatePickerLabel{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordDatePickerDS.error input{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(252 84 61/var(--tw-border-opacity));color:rgb(252 84 61/var(--tw-text-opacity))}.bordDatePickerDS.error input::-webkit-calendar-picker-indicator{background-image:url(../../assets/CalendarErrorIcon.svg)}.bordDatePickerDS.disabled .bordDatePickerLabel{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordDatePickerDS.disabled input{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));color:rgb(98 108 130/var(--tw-text-opacity))}.bordDatePickerDS.disabled input::-webkit-calendar-picker-indicator{background-image:url(../../assets/CalendarInactiveIcon.svg)}";
|
|
6384
|
+
styleInject(css_248z$u);
|
|
6385
|
+
|
|
6386
|
+
const BordDatePicker = ({ updateCurrentValueCallback, isFilled, defaultValue, desiredTimeZone, label, errorText, isDisabled, hideErrorText, debounceTime, handleFocus, customWidth = "100%", }) => {
|
|
6387
|
+
const [currentDate, setCurrentDate] = useState("");
|
|
6388
|
+
const debouncedDate = !!debounceTime && useDebounce(currentDate, debounceTime);
|
|
6389
|
+
const errorStyles = errorText && errorText.length ? "error" : "";
|
|
6390
|
+
const filledStyles = (isFilled || (currentDate && currentDate.length > 0)) && !isDisabled
|
|
6391
|
+
? "filled"
|
|
6392
|
+
: "";
|
|
6393
|
+
const disabledStyles = isDisabled ? "disabled" : "";
|
|
6394
|
+
const classNameStyle = `bordDatePickerDS ${errorStyles} ${filledStyles} ${disabledStyles}`;
|
|
6395
|
+
const handleInputChange = (event) => {
|
|
6396
|
+
const { value } = event.target;
|
|
6397
|
+
const newDateTime = convertSimpleDateToDateTimeZulu(value, desiredTimeZone);
|
|
6398
|
+
const newSimpleDate = formatDateToPicker(newDateTime, desiredTimeZone);
|
|
6399
|
+
setCurrentDate(newSimpleDate || "");
|
|
6400
|
+
if (updateCurrentValueCallback && !debounceTime) {
|
|
6401
|
+
updateCurrentValueCallback(newDateTime);
|
|
6402
|
+
}
|
|
6403
|
+
};
|
|
6404
|
+
const handleUpdatedDate = () => {
|
|
6405
|
+
if (!debouncedDate || !updateCurrentValueCallback)
|
|
6406
|
+
return;
|
|
6407
|
+
const newDateTime = convertSimpleDateToDateTimeZulu(debouncedDate, desiredTimeZone);
|
|
6408
|
+
updateCurrentValueCallback(newDateTime);
|
|
6409
|
+
};
|
|
6410
|
+
useEffect(() => {
|
|
6411
|
+
handleUpdatedDate();
|
|
6412
|
+
}, [debouncedDate]);
|
|
6413
|
+
const setInitialDate = () => {
|
|
6414
|
+
if (currentDate)
|
|
6415
|
+
return;
|
|
6416
|
+
const formattedDefaultValue = formatDateToPicker(defaultValue, desiredTimeZone);
|
|
6417
|
+
setCurrentDate(formattedDefaultValue || "");
|
|
6418
|
+
};
|
|
6419
|
+
useEffect(() => {
|
|
6420
|
+
setInitialDate();
|
|
6421
|
+
}, [defaultValue]);
|
|
6422
|
+
return (jsxs("div", { className: classNameStyle, style: { width: customWidth }, children: [label && jsx("label", { className: "bordDatePickerLabel", children: label }), jsx("input", { type: "date", value: currentDate, readOnly: isDisabled, onChange: handleInputChange, onFocus: handleFocus }), errorText && !hideErrorText && errorText.length > 0 && (jsx("div", { className: "errorText", children: errorText }))] }));
|
|
6423
|
+
};
|
|
6424
|
+
|
|
6425
|
+
var css_248z$t = ".bordDropdownDS,.bordDropdownSkeletonLoader{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));width:100%}.bordDropdownDS .componentLabel,.bordDropdownSkeletonLoader .componentLabel{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1rem;line-height:1.302rem;margin-bottom:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.bordDropdownDS .componentDropdown,.bordDropdownSkeletonLoader .componentDropdown{position:relative;width:100%}.bordDropdownDS .componentDropdown .closedDropdown,.bordDropdownDS .componentDropdown .closedDropdownSkeletonLoader,.bordDropdownSkeletonLoader .componentDropdown .closedDropdown,.bordDropdownSkeletonLoader .componentDropdown .closedDropdownSkeletonLoader{--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(7 15 33/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-style:solid;border-width:1px;cursor:pointer;display:flex;font-size:1.2rem;gap:.125rem;height:4rem;justify-content:space-between;line-height:1rem;padding:1.1rem 1.6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.bordDropdownDS .componentDropdown .closedDropdown .currentValueOrplaceholder,.bordDropdownDS .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder,.bordDropdownSkeletonLoader .componentDropdown .closedDropdown .currentValueOrplaceholder,.bordDropdownSkeletonLoader .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder{align-items:center;display:flex;gap:.8rem;width:100%}.bordDropdownDS .componentDropdown .closedDropdown .currentValueOrplaceholder .magnifierIcon path,.bordDropdownDS .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder .magnifierIcon path,.bordDropdownSkeletonLoader .componentDropdown .closedDropdown .currentValueOrplaceholder .magnifierIcon path,.bordDropdownSkeletonLoader .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder .magnifierIcon path{stroke:#c6c7cb}.bordDropdownDS .componentDropdown .closedDropdown .currentValueOrplaceholder .optionContainer,.bordDropdownDS .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder .optionContainer,.bordDropdownSkeletonLoader .componentDropdown .closedDropdown .currentValueOrplaceholder .optionContainer,.bordDropdownSkeletonLoader .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder .optionContainer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bordDropdownDS .componentDropdown .closedDropdown .currentValueOrplaceholder .optionContainer .optionFlag,.bordDropdownDS .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder .optionContainer .optionFlag,.bordDropdownSkeletonLoader .componentDropdown .closedDropdown .currentValueOrplaceholder .optionContainer .optionFlag,.bordDropdownSkeletonLoader .componentDropdown .closedDropdownSkeletonLoader .currentValueOrplaceholder .optionContainer .optionFlag{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:.2rem;height:.9rem;margin-bottom:.3rem;margin-inline-end:.2rem;min-width:1.2rem;position:relative;top:.125rem}.bordDropdownDS .componentDropdown .closedDropdown:hover,.bordDropdownSkeletonLoader .componentDropdown .closedDropdown:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bordDropdownDS .componentDropdown .nudosSearchBar,.bordDropdownSkeletonLoader .componentDropdown .nudosSearchBar{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));width:100%}.bordDropdownDS .componentDropdown .nudosSearchBar .searchBarContainer,.bordDropdownSkeletonLoader .componentDropdown .nudosSearchBar .searchBarContainer{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));height:4rem;width:100%}.bordDropdownDS .componentDropdown .nudosSearchBar .searchBarContainer input,.bordDropdownSkeletonLoader .componentDropdown .nudosSearchBar .searchBarContainer input{height:3.8rem;width:100%}.bordDropdownDS .componentDropdown .openDropdown,.bordDropdownSkeletonLoader .componentDropdown .openDropdown{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(7 15 33/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-style:solid;border-width:1px;margin-top:.4rem;overflow-y:hidden;padding:.8rem .1rem 1.2rem .8rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:30}.bordDropdownDS .componentDropdown .openDropdown .dropdownOptionsList,.bordDropdownSkeletonLoader .componentDropdown .openDropdown .dropdownOptionsList{height:auto;max-height:28rem;overflow-y:auto;position:relative}.bordDropdownDS .componentDropdown .openDropdown .dropdownOptionsList .optionContainer,.bordDropdownSkeletonLoader .componentDropdown .openDropdown .dropdownOptionsList .optionContainer{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;font-size:1.4rem;line-height:1rem;padding-bottom:.8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordDropdownDS .componentDropdown .openDropdown .dropdownOptionsList .optionContainer:hover,.bordDropdownSkeletonLoader .componentDropdown .openDropdown .dropdownOptionsList .optionContainer:hover{--tw-text-opacity:0.75}.bordDropdownDS .componentDropdown .openDropdown .dropdownOptionsList .optionContainer .optionFlag,.bordDropdownSkeletonLoader .componentDropdown .openDropdown .dropdownOptionsList .optionContainer .optionFlag{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:.2rem;height:.9rem;margin-bottom:.3rem;margin-right:.8rem;min-width:1.2rem;position:relative;top:.125rem}.bordDropdownDS .caption,.bordDropdownDS .errorText,.bordDropdownSkeletonLoader .caption,.bordDropdownSkeletonLoader .errorText{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));font-size:1rem;line-height:1rem;margin-top:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.bordDropdownDS .errorText,.bordDropdownSkeletonLoader .errorText{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity));font-size:1rem;line-height:1.302rem;margin-top:.4rem}.bordDropdownDS.filled .componentDropdown .closedDropdown,.bordDropdownSkeletonLoader.filled .componentDropdown .closedDropdown{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity));border-width:2px}.bordDropdownDS.error,.bordDropdownSkeletonLoader.error{font-size:1rem;line-height:1.302rem}.bordDropdownDS.error,.bordDropdownDS.error .componentLabel,.bordDropdownSkeletonLoader.error,.bordDropdownSkeletonLoader.error .componentLabel{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordDropdownDS.error .componentDropdown .closedDropdown,.bordDropdownSkeletonLoader.error .componentDropdown .closedDropdown{--tw-border-opacity:1;border-color:rgb(252 84 61/var(--tw-border-opacity))}.bordDropdownDS.error .componentDropdown .closedDropdown .magnifierIcon path,.bordDropdownDS.error .componentDropdown .closedDropdown svg path,.bordDropdownSkeletonLoader.error .componentDropdown .closedDropdown .magnifierIcon path,.bordDropdownSkeletonLoader.error .componentDropdown .closedDropdown svg path{stroke:#fc543d}.bordDropdownDS.deactivated,.bordDropdownSkeletonLoader.deactivated{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordDropdownDS.deactivated .caption,.bordDropdownDS.deactivated .componentLabel,.bordDropdownSkeletonLoader.deactivated .caption,.bordDropdownSkeletonLoader.deactivated .componentLabel{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity));margin-top:.4rem}.bordDropdownDS.deactivated .componentDropdown .closedDropdown,.bordDropdownSkeletonLoader.deactivated .componentDropdown .closedDropdown{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));cursor:not-allowed}.bordDropdownDS.extraSmall,.bordDropdownSkeletonLoader.extraSmall{max-width:8rem;min-width:8rem}.bordDropdownDS.small,.bordDropdownSkeletonLoader.small{max-width:18rem;min-width:18rem}.bordDropdownDS.small-184,.bordDropdownSkeletonLoader.small-184{max-width:18.4rem;min-width:8.4rem}.bordDropdownDS.medium,.bordDropdownSkeletonLoader.medium{max-width:28rem;min-width:28rem}.bordDropdownDS.large,.bordDropdownSkeletonLoader.large{max-width:38rem;min-width:38rem}.bordDropdownDS.w-80,.bordDropdownSkeletonLoader.w-80{max-width:8rem}.bordDropdownDS.w-180,.bordDropdownSkeletonLoader.w-180{max-width:18rem}.bordDropdownDS.w-280,.bordDropdownSkeletonLoader.w-280{max-width:28rem}.bordDropdownDS.w-380,.bordDropdownSkeletonLoader.w-380{max-width:38rem;min-width:38rem}.bordDropdownDS.matchingBackground .componentDropdown .closedDropdown,.bordDropdownDS.matchingBackground .componentDropdown .closedDropdownSkeletonLoader,.bordDropdownSkeletonLoader.matchingBackground .componentDropdown .closedDropdown,.bordDropdownSkeletonLoader.matchingBackground .componentDropdown .closedDropdownSkeletonLoader{background-color:transparent;border-style:none;font-size:1rem;line-height:.75rem;max-height:.3rem;padding:0}.bordDropdownSkeletonLoader .componentDropdown .currentValueOrplaceholder .selectedOption{font-size:1.2rem;line-height:1rem}.bordDropdownSkeletonLoader .componentDropdown .closedDropdownSkeletonLoader{border-style:none;cursor:default}";
|
|
6426
|
+
styleInject(css_248z$t);
|
|
6427
|
+
|
|
6428
|
+
/**
|
|
6429
|
+
* IMPORTANT: if the styles of the implementation you are going to make of this component differs significantly from the design system options, DONT MODIFY THIS COMPONENT, use the customClassname, componentStyles, dropdownStyles, dropdownOptionsListStyles properties to customized it.
|
|
6430
|
+
* IMPORTANT: for the formDropdownOptionsCallback each of the returned options in the returned array should have the className "optionContainer" to inherit the default styles for the options UI.
|
|
6431
|
+
* IMPORTANT: for the formDropdownOptionsCallback each of the returned options should include as the onClick prop the logic to select the option, ie updated the current option with the newly selected value
|
|
6432
|
+
* @property {T[]} rawOptions : Optional, an array of all the possible values from which select. The type of the elements in the array must be the same for all, but can be anything required by the instance of this component. This type is the same one expected in the formDropdownOptionsCallback and filterBySearchStringCallback
|
|
6433
|
+
* @property { (rawOptions: T[], clickOptionCallback: (option: T) => void) => JSX.Element[], searchString?: string } formDropdownOptionsCallback : a function that maps the rawOptions array to an array of JSX.Element that will be displayed as the options for dropdown
|
|
6434
|
+
* @property { (rawSelectedOption: T) => JSX.Element } formSelectedOptionUICallback : a function that forms the UI to show when the dropdown is closed starting from the raw value of the selected option
|
|
6435
|
+
* @property { (search: string, rawOptions: T[]) => T[] } filterBySearchStringCallback : a function that implements the filtering logic using the search string of the dropdown. Must return an array of elements with the same type used in the elements of the rawOptions property, or an empty array if no results are found.
|
|
6436
|
+
* @property { (...args: (number | string)[]) => void } dropdownCloseCallback : a function callback to execute upon closing the dropdown
|
|
6437
|
+
* @property { T } currentValue : the current selected value, it is this value that updates upon clicking on an option in the dropdown. Must be of the same type used for the elements of the rawOptions array
|
|
6438
|
+
* @property {string} componentSize : Optional, one of the standard sizes for the components, corresponding to one of the following words: "extra-small", "small", "medium" or "large". If no value is passed the component will have the width of its parent container.
|
|
6439
|
+
* @property {string} customClassname : Optional, a string classname to provide customizing styles.
|
|
6440
|
+
* @property {string} customPlaceholder : Optional, the desired text when the dropdown is closed and no option has been selected yet. Default is the text "Elige una opción"
|
|
6441
|
+
* @property {boolean} isFilled : Optional, a boolean indicating if the dropdown component must have filled styles or not.
|
|
6442
|
+
* @property {boolean} isFocused : Optional, a boolean indicating if the dropdown component must show the focused styles or not.
|
|
6443
|
+
* @property {boolean} includeMagnifierIcon : Optional, a boolean indicating if the dropdown component should have a magnifier icon on the left or not. DEFAULT is true
|
|
6444
|
+
* @property {JSX.Element} customIcon : Optional, a custom icon to show on the dropdown closed UI, if this is passed it replaces the magnifier ico
|
|
6445
|
+
* @property {string} label : Optional, a label for the select input.
|
|
6446
|
+
* @property {string} caption : Optional, a caption to shown at the components bottom.
|
|
6447
|
+
* @property {string} errorText : Optional, the text to be shown if theres an error with the component or its current selected value. If an error is passed the style of the component will change to reflect that.
|
|
6448
|
+
* @property {boolean} showSkeletonLoader - Optional,a boolean indicating if the component is loading and therefore the skeleton loader is to be shown. Default is false.
|
|
6449
|
+
* @property {boolean} isDeactivated : Optional, boolean indicating if the dropdown input is deactivated. If a value is provided the input will behave as a read only field and styles will be accordingly.
|
|
6450
|
+
* @property {{[key:string]: string}} componentStyles : an object with valid styles to be used as the value for the style property of the parent component. Use it to customized the NudosSearchbarDropdown component.
|
|
6451
|
+
* @property {{[key:string]: string}} dropdownStyles : an object with valid styles to be used as the value for the style property of the open dropdown section. Use it to customized the NudosSearchbarDropdown component.
|
|
6452
|
+
* @property {{[key:string]: string}} dropdownOptionsListStyles : an object with valid styles to be used as the value for the style property of the dropdown options list. Use it to customized the NudosSearchbarDropdown component.
|
|
6453
|
+
* @property {boolean} closesOnClickOutside : Optional, a boolean indicating if the dropdown closes when clicked outside. If no value is pause the default is true, with the select value being updated to the default.
|
|
6454
|
+
* @property {boolean} closesOnChangeSelection : Optional, a boolean indicating if the dropdown closes when the selected option(s) change. If no value is pause the default is true.
|
|
6455
|
+
* @property {string} hideErrorText : Optional, if the dropdown is part of another component that shows an error text, used this boolean to prevent from repeating the error text.
|
|
6456
|
+
*/
|
|
6457
|
+
const BordDropdown = ({ label, caption, isFilled, errorText, isFocused, rawOptions, customIcon, customLabel, openDropdown = false, currentValue, hideErrorText, componentSize, isDeactivated = false, dropdownStyles, componentStyles, customClassname, customInputClass, customPlaceholder, alternativeStyling, showSkeletonLoader = false, includeMagnifierIcon = true, closesOnClickOutside = true, closesOnChangeSelection = true, dropdownOptionsListStyles, dropdownCloseCallback, formDropdownOptionsCallback, formSelectedOptionUICallback, filterBySearchStringCallback, }) => {
|
|
6458
|
+
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
6459
|
+
const [filteredRawOptions, setFilteredRawOptions] = useState([]);
|
|
6460
|
+
const [dropdownSelectOptions, setDropdownSelectOptions] = useState([]);
|
|
6461
|
+
const [searchString, setSearchString] = useState('');
|
|
6462
|
+
const refContainer = useRef(null);
|
|
6463
|
+
const customClassnameStyle = customClassname ? customClassname : '';
|
|
6464
|
+
const componentSizeStyle = componentSize || '';
|
|
6465
|
+
const deactivatedStyles = isDeactivated ? 'deactivated' : '';
|
|
6466
|
+
const filledStyles = isFilled ? 'filled' : '';
|
|
6467
|
+
const focusedStyles = isDropdownOpen || isFocused ? 'focused' : '';
|
|
6468
|
+
const errorStyles = errorText && errorText.length > 0 ? 'error' : '';
|
|
6469
|
+
const alternativeStylingClassname = alternativeStyling || '';
|
|
6470
|
+
const componentClassnames = `bordDropdownDS ${customClassnameStyle} ${componentSizeStyle} ${deactivatedStyles} ${filledStyles} ${errorStyles} ${focusedStyles} ${alternativeStylingClassname}`;
|
|
6471
|
+
const skeletonLoaderClassnames = `bordDropdownSkeletonLoader ${componentSizeStyle || 'extraSmall'} ${alternativeStylingClassname}`;
|
|
6472
|
+
const placeholderDefault = 'Buscar';
|
|
6473
|
+
const openDropDownList = () => !isDeactivated && setIsDropdownOpen(true);
|
|
6474
|
+
const closeDropDown = () => {
|
|
6475
|
+
if (dropdownCloseCallback) {
|
|
6476
|
+
dropdownCloseCallback();
|
|
6477
|
+
}
|
|
6478
|
+
setIsDropdownOpen(false);
|
|
6479
|
+
setSearchString('');
|
|
6480
|
+
};
|
|
6481
|
+
const closeDropdownOnSelection = () => closesOnChangeSelection && closeDropDown();
|
|
6482
|
+
const handleClickSelect = () => !isDropdownOpen && openDropDownList();
|
|
6483
|
+
const currentValueUI = currentValue ? formSelectedOptionUICallback(currentValue) : undefined;
|
|
6484
|
+
const includeMagnifierIconStyles = includeMagnifierIcon ? { display: 'flex' } : undefined;
|
|
6485
|
+
const onHandleClickAway = useCallback(async (e) => {
|
|
6486
|
+
if (refContainer.current && isDropdownOpen && !refContainer.current.contains(e.target)) {
|
|
6487
|
+
if (closesOnClickOutside) {
|
|
6488
|
+
closeDropDown();
|
|
6489
|
+
}
|
|
6490
|
+
}
|
|
6491
|
+
}, [refContainer, isDropdownOpen, closeDropDown]);
|
|
6492
|
+
const getSkeletonLoader = () => {
|
|
6493
|
+
return (jsxs("div", { className: skeletonLoaderClassnames, children: [label && jsx("div", { className: "componentLabel truncate", children: label }), jsx("div", { className: "componentDropdown", children: jsx("div", { className: "closedDropdownSkeletonLoader animationLoader" }) })] }));
|
|
6494
|
+
};
|
|
6495
|
+
useEffect(() => {
|
|
6496
|
+
if (openDropdown && !isDropdownOpen) {
|
|
6497
|
+
openDropDownList();
|
|
6498
|
+
}
|
|
6499
|
+
}, [openDropdown]);
|
|
6500
|
+
useEffect(() => {
|
|
6501
|
+
window.addEventListener('mousedown', onHandleClickAway);
|
|
6502
|
+
return () => {
|
|
6503
|
+
window.removeEventListener('mousedown', onHandleClickAway);
|
|
6504
|
+
};
|
|
6505
|
+
}, [onHandleClickAway]);
|
|
6506
|
+
useEffect(() => {
|
|
6507
|
+
const newDropdownOptions = formDropdownOptionsCallback(filteredRawOptions, closeDropdownOnSelection, searchString);
|
|
6508
|
+
setDropdownSelectOptions(newDropdownOptions);
|
|
6509
|
+
}, [filteredRawOptions]);
|
|
6510
|
+
useEffect(() => {
|
|
6511
|
+
if (!searchString)
|
|
6512
|
+
return setFilteredRawOptions(rawOptions);
|
|
6513
|
+
const newFilteredOptions = filterBySearchStringCallback(searchString, rawOptions);
|
|
6514
|
+
setFilteredRawOptions(newFilteredOptions);
|
|
6515
|
+
}, [searchString, rawOptions]);
|
|
6516
|
+
return (jsxs(Fragment, { children: [showSkeletonLoader && getSkeletonLoader(), !showSkeletonLoader && (jsxs("div", { className: componentClassnames, children: [label && jsx("div", { className: `componentLabel truncate ${customLabel || ''}`, children: label }), jsxs("div", { className: "componentDropdown", ref: refContainer, onClick: handleClickSelect, children: [!isDropdownOpen && (jsxs("div", { className: "closedDropdown", style: componentStyles, children: [jsxs("div", { className: "currentValueOrplaceholder", style: includeMagnifierIconStyles, children: [includeMagnifierIcon && !customIcon && (jsx(BordOneToneIcon, { variant: "search", className: "magnifierIcon", standardSize: 14 })), customIcon || null, currentValueUI || customPlaceholder || 'Elige una opción'] }), !isDropdownOpen && jsx(BordOneToneIcon, { variant: "arrowHeadDown", standardSize: 14 })] })), isDropdownOpen && !isDeactivated && (jsxs("div", { className: "openDropdownInput", style: componentStyles, children: [jsx(BordSearchBar, { customInputClass: customInputClass, handleChange: setSearchString, placeholder: customPlaceholder ?? placeholderDefault, defaultValue: searchString, isFilled: !!searchString, customIcon: customIcon, includeMagnifierIcon: includeMagnifierIcon, includeDropdownArrowIcon: true, isDeactivated: isDeactivated, label: "" }), jsx("div", { className: "openDropdown", style: dropdownStyles, children: jsx("div", { className: "dropdownOptionsList", style: dropdownOptionsListStyles, children: dropdownSelectOptions }) })] }))] }), errorText && !hideErrorText && errorText.length > 0 && jsx("div", { className: "errorText", children: errorText }), caption && !errorText && jsx("div", { className: "caption", children: caption })] }))] }));
|
|
6517
|
+
};
|
|
6518
|
+
|
|
6519
|
+
var css_248z$s = ".bordFeedbackAlertDS{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);border-radius:8px;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;gap:12px;padding:12px;width:100%}.bordFeedbackAlertDS .bordFeedbackAlertDescription{--tw-text-opacity:1;color:rgb(7 15 33/var(--tw-text-opacity))}.bordFeedbackAlertDS.info{background-color:rgb(223 242 255/var(--tw-bg-opacity));border-color:rgb(64 150 240/var(--tw-border-opacity));color:rgb(64 150 240/var(--tw-text-opacity))}.bordFeedbackAlertDS.info,.bordFeedbackAlertDS.success{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.bordFeedbackAlertDS.success{background-color:rgb(234 249 244/var(--tw-bg-opacity));border-color:rgb(0 153 79/var(--tw-border-opacity));color:rgb(0 153 79/var(--tw-text-opacity))}.bordFeedbackAlertDS.warning{background-color:rgb(254 251 232/var(--tw-bg-opacity));border-color:rgb(250 204 21/var(--tw-border-opacity));color:rgb(250 204 21/var(--tw-text-opacity))}.bordFeedbackAlertDS.error,.bordFeedbackAlertDS.warning{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.bordFeedbackAlertDS.error{background-color:rgb(255 215 220/var(--tw-bg-opacity));border-color:rgb(222 7 46/var(--tw-border-opacity));color:rgb(222 7 46/var(--tw-text-opacity))}.bordFeedbackAlertDS .bordFeedbackAlertIcon svg path{stroke:currentColor}.bordFeedbackAlertDS .bordFeedbackAlertContent{display:flex;flex-direction:column;font-size:10px;gap:4px}.test{background-color:red}";
|
|
6520
|
+
styleInject(css_248z$s);
|
|
6521
|
+
|
|
6522
|
+
const alertConfig = {
|
|
6523
|
+
info: { icon: 'info', class: 'info' },
|
|
6524
|
+
success: { icon: 'checkCircle', class: 'success' },
|
|
6525
|
+
warning: { icon: 'alertTriangleWarning', class: 'warning' },
|
|
6526
|
+
error: { icon: 'xCircle', class: 'error' },
|
|
6527
|
+
};
|
|
6528
|
+
const BordFeedbackAlert = ({ type, title, description, icon, iconProps, className = '', }) => {
|
|
6529
|
+
const config = alertConfig[type];
|
|
6530
|
+
return (jsxs("div", { className: `bordFeedbackAlertDS ${config?.class} ${className}`, children: [jsx("div", { className: "bordFeedbackAlertIcon", children: icon ?? jsx(BordOneToneIcon, { variant: config?.icon, customWidth: "15px", ...iconProps }) }), jsxs("div", { className: "bordFeedbackAlertContent", children: [title && jsx("h3", { className: "bordFeedbackAlertTitle", children: title }), description && jsx("div", { className: "bordFeedbackAlertDescription", children: description })] })] }));
|
|
6531
|
+
};
|
|
6532
|
+
|
|
6533
|
+
var css_248z$r = ".bordGlassContainer{align-items:center;background-color:#1b202fcc;display:flex;height:100%;justify-content:center;position:absolute;width:100%}";
|
|
6534
|
+
styleInject(css_248z$r);
|
|
6535
|
+
|
|
6536
|
+
const BordGlass = ({ children, customClassName = "bordGlassContainer", }) => {
|
|
6537
|
+
return jsx("div", { className: `${customClassName} backdrop-blur`, children: children });
|
|
6538
|
+
};
|
|
6539
|
+
|
|
6540
|
+
/**
|
|
6541
|
+
* BordLogo component
|
|
6542
|
+
*
|
|
6543
|
+
* @example
|
|
6544
|
+
* <BordLogo />
|
|
6545
|
+
*
|
|
6546
|
+
* @param {Object} props Component props
|
|
6547
|
+
* @param {number} [props.standardSize=48] Standard logo size in pixels
|
|
6548
|
+
* @param {string} [props.customWidth] Custom logo width
|
|
6549
|
+
* @param {string} [props.colorLetters=#fff] Color of the letters
|
|
6550
|
+
* @param {string} [props.colorDot=#FF6175] Color of the dot
|
|
6551
|
+
*/
|
|
6552
|
+
const BordLogo = ({ standardSize = 80, customWidth, colorLetters = "#fff", colorDot = "#FF6175", }) => {
|
|
6553
|
+
const standardSizeStyle = `${(standardSize / 10).toFixed(1)}rem`;
|
|
6554
|
+
const logoWidth = customWidth || standardSizeStyle;
|
|
6555
|
+
return (jsx("div", { className: "bordLogo", style: { width: logoWidth }, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 380 120", children: [jsx("path", { className: "bordLogoLetters", fill: colorLetters, d: "M82.37 33.363c-10.577 0-19.447 3.113-26.286 8.713V2.482A1.57 1.57 0 0 0 54.513.91h-6.596a8.156 8.156 0 0 0-8.157 8.167V109.42c0 4.507 3.581 8.235 8.089 8.235 4.195 0 7.776-3.269 8.235-7.308 6.84 5.6 15.709 8.713 26.285 8.713 25.349 0 43.39-18.353 43.39-42.922 0-24.568-18.197-42.765-43.39-42.765v-.01Zm0 69.519c-14.656 0-25.994-10.732-25.994-26.754 0-16.02 11.338-26.597 25.993-26.597 14.656 0 25.837 10.732 25.837 26.598 0 15.864-11.338 26.753-25.837 26.753ZM379.99 2.482A1.57 1.57 0 0 0 378.419.91h-6.586a8.156 8.156 0 0 0-8.157 8.167v32.998c-6.839-5.6-15.709-8.713-26.285-8.713-25.193 0-43.39 18.353-43.39 42.766 0 24.412 18.041 42.921 43.39 42.921 10.576 0 19.446-3.103 26.285-8.713.469 4.049 4.05 7.308 8.245 7.308 4.508 0 8.079-3.727 8.079-8.235V2.472l-.01.01Zm-42.609 100.4c-14.519 0-25.866-10.742-25.866-26.763S322.862 49.5 337.381 49.5s26.012 10.743 26.012 26.618c0 15.874-11.347 26.763-26.012 26.763ZM284.888 33.363h-13.524c-9.64 0-16.635 3.727-20.372 8.557v-.468c0-.313-.02-.625-.059-.937v-5.571a1.58 1.58 0 0 0-1.581-1.58h-6.634c-.274 0-.537.019-.8.038h-.059c-.244.02-.478.059-.712.108a.994.994 0 0 0-.166.038 6.232 6.232 0 0 0-.576.147c-.088.02-.166.049-.244.078a8.22 8.22 0 0 0-.439.156c-.117.049-.224.088-.341.146-.088.04-.186.088-.274.127-.156.078-.312.156-.458.244-.02.01-.039.02-.049.04-2.429 1.394-4.088 3.98-4.088 6.976v69.363c0 4.508 3.727 8.235 8.235 8.235 4.508 0 8.245-3.727 8.245-8.235v-38.19c0-11.347 6.069-23.085 19.592-23.085h7.776c.225 0 .439-.02.654-.039h.059c.263-.02.517-.058.78-.107.02 0 .049 0 .078-.01.205-.039.4-.088.595-.146.117-.04.244-.069.361-.108.098-.029.186-.058.283-.097 2.908-1.035 4.967-3.571 5.25-6.83.019-.254.039-.508.039-.752v-6.527c0-.859-.703-1.551-1.561-1.551h-.02l.01-.02ZM210.861 33.363h-34.599a42.637 42.637 0 0 0-27.252 9.787c-9.523 7.854-15.591 19.748-15.591 33.057a42.632 42.632 0 0 0 9.786 27.251 42.981 42.981 0 0 0 5.805 5.806 42.691 42.691 0 0 0 27.252 9.786c13.309 0 25.203-6.069 33.057-15.592a42.688 42.688 0 0 0 9.786-27.251v-34.6a8.243 8.243 0 0 0-8.254-8.244h.01Zm-8.089 42.844c0 6.44-2.283 12.352-6.088 16.967-4.889 5.932-12.294 9.708-20.578 9.708a26.585 26.585 0 0 1-16.968-6.088 27.018 27.018 0 0 1-3.62-3.62 26.564 26.564 0 0 1-6.088-16.968c0-8.283 3.776-15.689 9.708-20.577a26.563 26.563 0 0 1 16.968-6.089c14.723 0 26.666 11.943 26.666 26.667Z" }), jsx("path", { className: "bordLogoDot", fill: colorDot, d: "M12.177 119.089c6.732 0 12.177-5.454 12.177-12.177S18.9 94.735 12.177 94.735 0 100.19 0 106.912s5.454 12.177 12.177 12.177Z" })] }) }));
|
|
6556
|
+
};
|
|
6557
|
+
|
|
6558
|
+
var css_248z$q = ".bordMarketplaceButtonDS{border-radius:.8rem;box-shadow:0 0 8px 0 #22cfab;font-size:1.4rem;font-weight:500;height:4.2rem;line-height:2rem;margin:auto;max-width:14rem;padding:.2rem;width:-moz-max-content;width:max-content}.bordMarketplaceButtonDS.light{--tw-text-opacity:1;background:linear-gradient(95.49deg,#60ddc3 .3%,#23a5ff 93.7%);color:rgb(9 131 129/var(--tw-text-opacity))}.bordMarketplaceButtonDS.light .bordMarketplaceButtonContainer:hover{--tw-text-opacity:1;background:transparent;color:rgb(7 15 33/var(--tw-text-opacity))}.bordMarketplaceButtonDS.light .bordMarketplaceButtonContainer:hover .bordOneToneIcon svg path{stroke:#070f21}.bordMarketplaceButtonDS.light .bordOneToneIcon svg path{stroke:#098381}.bordMarketplaceButtonDS.dark{--tw-text-opacity:1;background:linear-gradient(95.49deg,#22cfab .3%,#0057a7 93.7%);color:rgb(34 207 171/var(--tw-text-opacity))}.bordMarketplaceButtonDS.dark .bordMarketplaceButtonContainer:hover{--tw-text-opacity:1;background:transparent;color:rgb(255 255 255/var(--tw-text-opacity))}.bordMarketplaceButtonDS.dark .bordMarketplaceButtonContainer:hover .bordOneToneIcon svg path{stroke:#fff}.bordMarketplaceButtonDS.dark .bordOneToneIcon svg path{stroke:#22cfab}.bordMarketplaceButtonDS .bordMarketplaceButtonContainer{--tw-bg-opacity:1;align-items:center;background-color:rgb(7 15 33/var(--tw-bg-opacity));border-radius:.8rem;display:flex;gap:.8rem;height:3.8rem;padding:1rem}.bordMarketplaceButtonDS:active{opacity:.75}";
|
|
6559
|
+
styleInject(css_248z$q);
|
|
6560
|
+
|
|
6561
|
+
/**
|
|
6562
|
+
* @param {Object} props - The properties object.
|
|
6563
|
+
* @param {string} props.buttonColor - The color of the button, applied as a CSS class.
|
|
6564
|
+
* @param {string} props.buttonText - The text to display inside the button.
|
|
6565
|
+
* @param {function} props.onClick - The function to call when the button is clicked.
|
|
6566
|
+
* @returns {JSX.Element} The rendered button component.
|
|
6567
|
+
*/
|
|
6568
|
+
const BordMarketplaceButton = ({ buttonColor, buttonText, onClick, ...rest }) => {
|
|
6569
|
+
return (jsx("button", { className: `bordMarketplaceButtonDS ${buttonColor}`, onClick: onClick, ...rest, children: jsxs("div", { className: "bordMarketplaceButtonContainer", children: [jsx(BordOneToneIcon, { variant: "shoppingCart", customWidth: "1.4rem", stroke: "#22CFAB" }), jsx("div", { children: buttonText })] }) }));
|
|
6570
|
+
};
|
|
6571
|
+
|
|
6572
|
+
var css_248z$p = ".bordToolModelMarkerDS{background-color:rgb(98 108 130/var(--tw-bg-opacity));position:relative}.bordToolModelMarkerDS,.bordToolModelMarkerDS .innerCircle{--tw-bg-opacity:1;align-items:center;border-radius:15998.4rem;display:flex;justify-content:center}.bordToolModelMarkerDS .innerCircle{background-color:rgb(38 43 57/var(--tw-bg-opacity));left:.1rem;position:absolute;top:.1rem}.bordToolModelMarkerDS.bordTool{--tw-gradient-from:#22cfab var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,207,171,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#0057a7 var(--tw-gradient-to-position);background-image:linear-gradient(to right,var(--tw-gradient-stops));border-style:none;display:block}";
|
|
6573
|
+
styleInject(css_248z$p);
|
|
6574
|
+
|
|
6575
|
+
const BordToolModelMarker = ({ isBordTool, customSize, }) => {
|
|
6576
|
+
const bordToolStyles = isBordTool ? 'bordTool' : '';
|
|
6577
|
+
const classnames = `bordToolModelMarkerDS ${bordToolStyles}`;
|
|
6578
|
+
const bordIconColor = isBordTool
|
|
6579
|
+
? bordColorTheme.cyan[300]
|
|
6580
|
+
: bordColorTheme.disabled.fgSecondary;
|
|
6581
|
+
const componentSize = customSize || 3.2;
|
|
6582
|
+
const size = `${componentSize}rem`;
|
|
6583
|
+
const iconWidth = `${(componentSize * 0.56).toFixed(2)}rem`;
|
|
6584
|
+
const innerCircleSize = `${(componentSize * 0.93).toFixed(2)}rem`;
|
|
6585
|
+
const innerCircleDisplacement = `${(componentSize * 0.032).toFixed(2)}rem`;
|
|
6586
|
+
const innerCircleStyles = {
|
|
6587
|
+
width: innerCircleSize,
|
|
6588
|
+
height: innerCircleSize,
|
|
6589
|
+
left: innerCircleDisplacement,
|
|
6590
|
+
top: innerCircleDisplacement,
|
|
6591
|
+
};
|
|
6592
|
+
return (jsx("div", { className: classnames, style: { width: size, height: size }, children: jsx("div", { className: "innerCircle", style: innerCircleStyles, children: jsx(BordOneToneIcon, { variant: "logoMaster", customWidth: iconWidth, fill: bordIconColor }) }) }));
|
|
6593
|
+
};
|
|
6594
|
+
|
|
6595
|
+
var css_248z$o = ".bordPhotoDS{--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));border-style:solid;border-width:.2rem;display:flex;justify-content:center;overflow-x:hidden;overflow-y:hidden}.bordPhotoDS img{height:auto;width:80%}.bordPhotoDS.circle{border-radius:15998.4rem}.bordPhotoDS.square{border-radius:1.2rem}.bordPhotoDS.s20{border-width:.1rem;height:2rem;width:2rem}.bordPhotoDS.s20.square{border-radius:.4rem}.bordPhotoDS.s32{border-width:.1rem;height:3.2rem;width:3.2rem}.bordPhotoDS.s32.square{border-radius:.4rem}.bordPhotoDS.s48{border-width:.1rem;height:4.8rem;width:4.8rem}.bordPhotoDS.s56{border-width:.1rem;height:5.6rem;width:5.6rem}.bordPhotoDS.s64{height:6.4rem;width:6.4rem}.bordPhotoDS.s100{height:10rem;width:10rem}.bordPhotoDS.avatarStyle{background-color:transparent;border-radius:0;border-style:none}.bordPhotoDS.additionalData{overflow-x:visible;overflow-y:visible;position:relative}.bordPhotoDS.additionalData .bordFlag{bottom:-12%;position:absolute;right:-12%}.bordPhotoDS.additionalData .bordToolModelMarker{bottom:-15%;position:absolute;right:-15%}";
|
|
6596
|
+
styleInject(css_248z$o);
|
|
6597
|
+
|
|
6598
|
+
const BordPhoto = ({ url, size = 's100', variant = 'square', imageProps, avatarProps, oneToneIconProps, flagProps, toolModelMarkerProps, ...rest }) => {
|
|
6599
|
+
const getPlaceholder = () => {
|
|
6600
|
+
const defaultValues = {
|
|
6601
|
+
placeholder: undefined,
|
|
6602
|
+
placeholderStyle: '',
|
|
6603
|
+
};
|
|
6604
|
+
if (url)
|
|
6605
|
+
return defaultValues;
|
|
6606
|
+
if (avatarProps) {
|
|
6607
|
+
return {
|
|
6608
|
+
placeholder: jsx(BordAvatar, { ...avatarProps }),
|
|
6609
|
+
placeholderStyle: 'avatarStyle',
|
|
6610
|
+
};
|
|
6611
|
+
}
|
|
6612
|
+
if (oneToneIconProps) {
|
|
6613
|
+
return {
|
|
6614
|
+
placeholder: jsx(BordOneToneIcon, { ...oneToneIconProps }),
|
|
6615
|
+
placeholderStyle: 'oneToneIconStyle',
|
|
6616
|
+
};
|
|
6617
|
+
}
|
|
6618
|
+
return defaultValues;
|
|
6619
|
+
};
|
|
6620
|
+
const getAdditionalData = () => {
|
|
6621
|
+
if (flagProps) {
|
|
6622
|
+
return {
|
|
6623
|
+
additionalDataComponent: jsx(BordFlag, { ...flagProps }),
|
|
6624
|
+
additionalDataStyles: 'additionalData',
|
|
6625
|
+
};
|
|
6626
|
+
}
|
|
6627
|
+
if (toolModelMarkerProps) {
|
|
6628
|
+
return {
|
|
6629
|
+
additionalDataComponent: jsx(BordToolModelMarker, { ...toolModelMarkerProps }),
|
|
6630
|
+
additionalDataStyles: 'additionalData',
|
|
6631
|
+
};
|
|
6632
|
+
}
|
|
6633
|
+
return {
|
|
6634
|
+
additionalDataComponent: undefined,
|
|
6635
|
+
additionalDataStyles: '',
|
|
6636
|
+
};
|
|
6637
|
+
};
|
|
6638
|
+
const { placeholder, placeholderStyle } = getPlaceholder();
|
|
6639
|
+
const { additionalDataComponent, additionalDataStyles } = getAdditionalData();
|
|
6640
|
+
const classnames = `bordPhotoDS ${size} ${variant} ${placeholderStyle} ${additionalDataStyles}`;
|
|
6641
|
+
return (jsxs("div", { className: classnames, ...rest, children: [!!url && jsx("img", { src: url, alt: "Photo", ...imageProps }), !!placeholder && placeholder, !!additionalDataComponent && additionalDataComponent] }));
|
|
6642
|
+
};
|
|
6643
|
+
|
|
6644
|
+
var css_248z$n = ".mentionableUserDS{align-items:center;border-radius:.2rem;cursor:pointer;display:flex;gap:.4rem;margin-bottom:.4rem;padding:.2rem}.mentionableUserDS .mentionableUserInfo .mentionableUserInfoName{font-size:1rem;font-weight:700;line-height:1.302rem;margin-bottom:-.2rem}.mentionableUserDS .mentionableUserInfo .mentionableUserInfoEmail{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity));font-size:1rem;line-height:1.302rem}.mentionableUserDS:last-child{margin-bottom:0}.mentionableUserDS:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}";
|
|
6645
|
+
styleInject(css_248z$n);
|
|
6646
|
+
|
|
6647
|
+
const MentionableUser = ({ user, handleSelectUser, hideOptionsCallback }) => {
|
|
6648
|
+
const { firstName, lastName, email, photoUrl } = user;
|
|
6649
|
+
const fullName = `${firstName || ''} ${lastName || ''}`.trim();
|
|
6650
|
+
const handleClick = () => {
|
|
6651
|
+
handleSelectUser?.(user);
|
|
6652
|
+
hideOptionsCallback?.();
|
|
6653
|
+
};
|
|
6654
|
+
return (jsxs("div", { className: "mentionableUserDS", onClick: handleClick, children: [jsx(BordPhoto, { url: photoUrl, imageProps: {
|
|
6655
|
+
style: {
|
|
6656
|
+
width: '2rem',
|
|
6657
|
+
height: '2rem',
|
|
6658
|
+
},
|
|
6659
|
+
}, size: "s20", variant: "circle", avatarProps: {
|
|
6660
|
+
variant: 'circularBordMascot',
|
|
6661
|
+
customWidth: '2rem',
|
|
6662
|
+
} }), jsxs("div", { className: "mentionableUserInfo", children: [jsx("div", { className: "mentionableUserInfoName", children: fullName }), jsx("div", { className: "mentionableUserInfoEmail", children: email })] })] }));
|
|
6663
|
+
};
|
|
6664
|
+
|
|
6665
|
+
var css_248z$m = ".mentionedUsersDS{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity));border-radius:.6rem;-moz-column-gap:.4rem;column-gap:.4rem;display:flex;overflow-x:auto;padding:.2rem;row-gap:.2rem}.mentionedUsersDS::-webkit-scrollbar{height:.2rem;width:.2rem}.mentionedUsersDS::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.mentionedUsersDS::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}.mentionedUsersDS .mentionedUser{z-index:10}.mentionedUsersDS .mentionedUser .mentionedUserSummary{--tw-text-opacity:1;color:rgb(0 87 167/var(--tw-text-opacity));display:flex;font-size:.75rem;font-weight:700;gap:.1rem}.mentionedUsersDS .mentionedUser .mentionedUserSummary .mentionedUserEmail{width:-moz-max-content;width:max-content}.mentionedUsersDS .mentionedUser .mentionedUserSummary .bordOneToneIcon{cursor:pointer}.mentionedUsersDS .mentionedUser .mentionableUser{display:none}.mentionedUsersDS .mentionedUser .mentionableUser:hover{display:block}";
|
|
6666
|
+
styleInject(css_248z$m);
|
|
6667
|
+
|
|
6668
|
+
const MentionedUsers = ({ mentionedUsers, handleRemoveUser }) => {
|
|
6669
|
+
return (jsx("div", { className: "mentionedUsersDS", children: mentionedUsers.map((user, index) => (jsxs("div", { className: "mentionedUser", children: [jsxs("div", { className: "mentionedUserSummary", children: [jsx("div", { className: "mentionedUserEmail", children: user.email }), jsx("div", { className: "bordOneToneIcon", onClick: () => handleRemoveUser(user), children: jsx(BordOneToneIcon, { customWidth: "1rem", variant: "xSquare" }) })] }), jsx(MentionableUser, { user: user })] }, `${user.userId}${index}`))) }));
|
|
6670
|
+
};
|
|
6671
|
+
|
|
6672
|
+
var css_248z$l = ".mentionableUsersListDS{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.6rem;height:100%;overflow-y:auto;padding:.8rem;position:absolute;width:100%;z-index:30}.mentionableUsersListDS::-webkit-scrollbar{height:.2rem;width:.2rem}.mentionableUsersListDS::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.mentionableUsersListDS::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}.mentionableUsersListDS .mentionableUsersListSearch{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity));font-size:1.4rem;line-height:2rem;margin-bottom:.4rem}";
|
|
6673
|
+
styleInject(css_248z$l);
|
|
6674
|
+
|
|
6675
|
+
const MentionableUsersList = ({ users, hideOptionsCallback, handleSelectUser, search, ...rest }) => {
|
|
6676
|
+
return (jsxs("div", { className: "mentionableUsersListDS", ...rest, children: [search && jsxs("div", { className: "mentionableUsersListSearch", children: ["Buscando: ", search] }), users.map(user => (jsx(MentionableUser, { user: user, handleSelectUser: handleSelectUser, hideOptionsCallback: hideOptionsCallback }, user.userId)))] }));
|
|
6677
|
+
};
|
|
6678
|
+
|
|
6679
|
+
var css_248z$k = ".bordMentionsDS{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity));border-radius:.6rem;border-width:1px;position:relative}.bordMentionsDS .bordMentionsInputContainer{height:100%;height:calc(100% - 2.4rem);overflow-y:auto;width:100%}.bordMentionsDS .bordMentionsInputContainer .bordMentionsInput{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));height:-moz-max-content;height:max-content;margin-left:auto;margin-right:auto;padding:.8rem;width:100%}.bordMentionsDS .bordMentionsInputContainer .bordMentionsInput:focus{outline:2px solid transparent;outline-offset:2px}";
|
|
6680
|
+
styleInject(css_248z$k);
|
|
6681
|
+
|
|
6682
|
+
const BordMentions = ({ placeholder, style = {}, userList = [], userListProps = {}, updateMessageCallback, updateMentionedUsersCallback, }) => {
|
|
6683
|
+
const [showOptions, setShowOptions] = useState(false);
|
|
6684
|
+
const [unmentionedUsers, setUnmentionedUsers] = useState(userList);
|
|
6685
|
+
const [filteredUsers, setFilteredUsers] = useState([]);
|
|
6686
|
+
const [mentionedUsers, setMentionedUsers] = useState([]);
|
|
6687
|
+
const [search, setSearch] = useState('');
|
|
6688
|
+
const bordMentionsInputRef = useRef(null);
|
|
6689
|
+
const bordMentionsRef = useRef(null);
|
|
6690
|
+
const focusOnTextEnd = () => {
|
|
6691
|
+
if (!bordMentionsInputRef.current)
|
|
6692
|
+
return;
|
|
6693
|
+
bordMentionsInputRef.current.focus();
|
|
6694
|
+
const range = document.createRange();
|
|
6695
|
+
const selection = window.getSelection();
|
|
6696
|
+
range.selectNodeContents(bordMentionsInputRef.current);
|
|
6697
|
+
range.collapse(false);
|
|
6698
|
+
selection?.removeAllRanges();
|
|
6699
|
+
selection?.addRange(range);
|
|
6700
|
+
};
|
|
6701
|
+
const handleBeforeInput = (e) => {
|
|
6702
|
+
const inputEvent = e;
|
|
6703
|
+
if (!showOptions && inputEvent.data === '@') {
|
|
6704
|
+
e.preventDefault();
|
|
6705
|
+
return setShowOptions(true);
|
|
6706
|
+
}
|
|
6707
|
+
if (!showOptions || !inputEvent.data)
|
|
6708
|
+
return;
|
|
6709
|
+
e.preventDefault();
|
|
6710
|
+
setSearch(search + inputEvent.data);
|
|
6711
|
+
};
|
|
6712
|
+
const handleFocus = () => {
|
|
6713
|
+
if (!bordMentionsInputRef.current)
|
|
6714
|
+
return;
|
|
6715
|
+
if (!bordMentionsInputRef.current.innerText || bordMentionsInputRef.current.innerText === placeholder) {
|
|
6716
|
+
bordMentionsInputRef.current.innerText = '';
|
|
6717
|
+
}
|
|
6718
|
+
};
|
|
6719
|
+
const handleBlur = () => {
|
|
6720
|
+
if (!bordMentionsInputRef.current)
|
|
6721
|
+
return;
|
|
6722
|
+
if (!bordMentionsInputRef.current.innerText) {
|
|
6723
|
+
bordMentionsInputRef.current.innerText = placeholder;
|
|
6724
|
+
}
|
|
6725
|
+
};
|
|
6726
|
+
const handleSelectUser = (user) => {
|
|
6727
|
+
setMentionedUsers(prev => [...prev, user]);
|
|
6728
|
+
setUnmentionedUsers(prev => prev.filter(u => u.userId !== user.userId));
|
|
6729
|
+
setSearch('');
|
|
6730
|
+
focusOnTextEnd();
|
|
6731
|
+
};
|
|
6732
|
+
const handleRemoveUser = (user) => {
|
|
6733
|
+
setMentionedUsers(prev => prev.filter(u => u.userId !== user.userId));
|
|
6734
|
+
setUnmentionedUsers(prev => [...prev, user]);
|
|
6735
|
+
focusOnTextEnd();
|
|
6736
|
+
};
|
|
6737
|
+
const handleKeyDown = (e) => {
|
|
6738
|
+
if (!showOptions)
|
|
6739
|
+
return;
|
|
6740
|
+
if (e.key === 'Escape') {
|
|
6741
|
+
setShowOptions(false);
|
|
6742
|
+
setSearch('');
|
|
6743
|
+
focusOnTextEnd();
|
|
6744
|
+
}
|
|
6745
|
+
if (e.key === 'Backspace') {
|
|
6746
|
+
setSearch(search.slice(0, -1));
|
|
6747
|
+
}
|
|
6748
|
+
};
|
|
6749
|
+
const handleClick = () => {
|
|
6750
|
+
if (showOptions)
|
|
6751
|
+
return setShowOptions(false);
|
|
6752
|
+
bordMentionsInputRef.current?.focus();
|
|
6753
|
+
};
|
|
6754
|
+
const handleClickOutside = (e) => {
|
|
6755
|
+
if (bordMentionsRef.current && !bordMentionsRef.current.contains(e.target)) {
|
|
6756
|
+
setShowOptions(false);
|
|
6757
|
+
setSearch('');
|
|
6758
|
+
}
|
|
6759
|
+
};
|
|
6760
|
+
useEffect(() => {
|
|
6761
|
+
// Filtra los usuarios no mencionados según el término de búsqueda y actualiza la lista de usuarios filtrados.
|
|
6762
|
+
const filteredUsers = unmentionedUsers.filter(user => {
|
|
6763
|
+
const fullName = `${user.firstName} ${user.lastName}`.toLowerCase();
|
|
6764
|
+
const email = user.email.toLowerCase();
|
|
6765
|
+
const trimmedSearch = search.trim().toLowerCase();
|
|
6766
|
+
return fullName.includes(trimmedSearch) || email.includes(trimmedSearch);
|
|
6767
|
+
});
|
|
6768
|
+
setFilteredUsers(filteredUsers);
|
|
6769
|
+
}, [search, unmentionedUsers.length]);
|
|
6770
|
+
useEffect(() => {
|
|
6771
|
+
// Agrega un evento para manejar clics fuera del componente y lo elimina al desmontar.
|
|
6772
|
+
document.addEventListener('click', handleClickOutside);
|
|
6773
|
+
return () => {
|
|
6774
|
+
document.removeEventListener('click', handleClickOutside);
|
|
6775
|
+
};
|
|
6776
|
+
}, []);
|
|
6777
|
+
useEffect(() => {
|
|
6778
|
+
// Actualiza el mensaje actual cuando hay un cambio en el contenido editable.
|
|
6779
|
+
const updateMessage = () => {
|
|
6780
|
+
updateMessageCallback?.(bordMentionsInputRef.current?.innerText?.trim() || '');
|
|
6781
|
+
};
|
|
6782
|
+
const currentRef = bordMentionsInputRef.current;
|
|
6783
|
+
currentRef?.addEventListener('input', updateMessage);
|
|
6784
|
+
return () => {
|
|
6785
|
+
currentRef?.removeEventListener('input', updateMessage);
|
|
6786
|
+
};
|
|
6787
|
+
}, []);
|
|
6788
|
+
useEffect(() => {
|
|
6789
|
+
// Llama al callback para actualizar los usuarios mencionados cada vez que cambian.
|
|
6790
|
+
updateMentionedUsersCallback?.(mentionedUsers);
|
|
6791
|
+
}, [mentionedUsers]);
|
|
6792
|
+
return (jsxs("div", { ref: bordMentionsRef, className: "bordMentionsDS", style: style, onKeyDown: handleKeyDown, onClick: handleClick, children: [showOptions && (jsx(MentionableUsersList, { search: search, users: filteredUsers, hideOptionsCallback: () => setShowOptions(false), handleSelectUser: handleSelectUser, ...userListProps })), mentionedUsers.length > 0 && (jsx(MentionedUsers, { mentionedUsers: mentionedUsers, handleRemoveUser: handleRemoveUser })), jsx("div", { className: "bordMentionsInputContainer", children: jsx("div", { ref: bordMentionsInputRef, className: "bordMentionsInput", contentEditable: "true", onFocus: handleFocus, onBlur: handleBlur, onBeforeInput: handleBeforeInput, dangerouslySetInnerHTML: { __html: placeholder } }) })] }));
|
|
6793
|
+
};
|
|
6794
|
+
|
|
6795
|
+
const BordNotificationOnIcon = ({ stroke, onClick }) => {
|
|
6796
|
+
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", onClick: onClick, children: [jsx("path", { stroke: "#C6C7CB", strokeLinecap: "round", strokeLinejoin: "round", d: "M11.442 17.5a1.667 1.667 0 0 1-2.884 0M15 6.667a5 5 0 0 0-10 0c0 5.833-2.5 7.5-2.5 7.5h15S15 12.5 15 6.667Z" }), jsx("circle", { cx: "15", cy: "5", r: "3.5", fill: "#FC543D", stroke: stroke })] }));
|
|
6797
|
+
};
|
|
6798
|
+
|
|
6799
|
+
const BordNotificationOffIcon = ({ onClick }) => {
|
|
6800
|
+
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", onClick: onClick, children: jsx("path", { stroke: "#C6C7CB", strokeLinecap: "round", strokeLinejoin: "round", d: "M11.442 17.5a1.667 1.667 0 0 1-2.884 0M15 6.667a5 5 0 0 0-10 0c0 5.833-2.5 7.5-2.5 7.5h15S15 12.5 15 6.667Z" }) }));
|
|
6801
|
+
};
|
|
6802
|
+
|
|
6803
|
+
const listOfBordNotificationIcons = {
|
|
6804
|
+
on: BordNotificationOnIcon,
|
|
6805
|
+
off: BordNotificationOffIcon,
|
|
6806
|
+
};
|
|
6807
|
+
|
|
6808
|
+
const BordNotificationIcon = ({ variant, standardSize = 32, customWidth, stroke, onClick }) => {
|
|
6809
|
+
const notifications = listOfBordNotificationIcons[variant];
|
|
6810
|
+
const standardSizeStyle = `${(standardSize / 10).toFixed(1)}rem`;
|
|
6811
|
+
const iconWidth = customWidth || standardSizeStyle;
|
|
6812
|
+
return (jsx("div", { style: { width: iconWidth }, children: React.createElement(notifications, { stroke, onClick }) }));
|
|
6813
|
+
};
|
|
6814
|
+
|
|
6815
|
+
var css_248z$j = ".bordPasswordInputDS{display:flex;flex-direction:column;gap:.2rem;height:100%;padding:0;width:100%}.bordPasswordInputDS .bordPasswordInputLabel{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.2rem;line-height:1.5rem}";
|
|
6816
|
+
styleInject(css_248z$j);
|
|
6817
|
+
|
|
6818
|
+
const BordPasswordInput = ({ label, disabled, placeholder = "Password", errorText, hideErrorText, setCurrentValue, }) => {
|
|
6819
|
+
const [isShowPassword, setIsShowPassword] = useState(false);
|
|
6820
|
+
const [typeInput, setTypeInput] = useState("password");
|
|
6821
|
+
useEffect(() => {
|
|
6822
|
+
if (isShowPassword) {
|
|
6823
|
+
setTypeInput("text");
|
|
6824
|
+
}
|
|
6825
|
+
else {
|
|
6826
|
+
setTypeInput("password");
|
|
6827
|
+
}
|
|
6828
|
+
}, [isShowPassword]);
|
|
6829
|
+
return (jsx("div", { className: "bordPasswordInputDS", children: jsx(BordTextInput, { setCurrentText: setCurrentValue, label: label, placeholder: placeholder, isFilled: false, inputProps: {
|
|
6830
|
+
type: typeInput,
|
|
6831
|
+
}, disabled: disabled, setIsPassword: setIsShowPassword, isPassword: isShowPassword, errorText: errorText, hideErrorText: hideErrorText, showPasswordIcon: true }) }));
|
|
6832
|
+
};
|
|
6833
|
+
|
|
6834
|
+
var css_248z$i = ".bordProfileSummaryDS{align-items:center;display:flex;gap:1.2rem}.bordProfileSummaryTextContainer{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.4rem;line-height:1.8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:13.6rem}.bordProfileSummaryTextContainer .bordProfileSummarySubTitle,.bordProfileSummaryTextContainer .bordProfileSummaryTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordProfileSummaryTextContainer .bordProfileSummarySubTitle{opacity:.75}";
|
|
6835
|
+
styleInject(css_248z$i);
|
|
6836
|
+
|
|
6837
|
+
const BordProfileSummary = ({ variant = 'circularWorld', imgUrl = null, title = 'Title', subTitle = 'Sub Title', }) => {
|
|
6838
|
+
const defaultAvatar = jsx(BordAvatar, { variant: variant });
|
|
6839
|
+
return (jsxs("div", { className: "bordProfileSummaryDS", children: [!imgUrl && defaultAvatar, imgUrl && jsx("img", { className: "rounded-full", height: 32, width: 32, src: imgUrl }), jsxs("div", { className: "bordProfileSummaryTextContainer", children: [jsx("div", { className: "bordProfileSummaryTitle", children: title }), jsx("div", { className: "bordProfileSummarySubTitle", children: subTitle })] })] }));
|
|
6840
|
+
};
|
|
6841
|
+
|
|
6842
|
+
const BordScrollBar = () => {
|
|
6843
|
+
return (jsx("div", { className: "w-300 h-200 overflow-auto bg-white-400", children: "BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar, BordScrollBar," }));
|
|
6844
|
+
};
|
|
6845
|
+
|
|
6846
|
+
var css_248z$h = ".sidebarLogoDS{margin:2rem auto 4rem;width:-moz-max-content;width:max-content}";
|
|
6847
|
+
styleInject(css_248z$h);
|
|
6848
|
+
|
|
6849
|
+
const SidebarLogo$1 = ({ isOpen, ...rest }) => {
|
|
6850
|
+
return (jsxs("div", { className: "sidebarLogoDS", ...rest, children: [isOpen && jsx(BordLogo, { standardSize: 80 }), !isOpen && jsx(BordOneToneIcon, { variant: "bord", stroke: "white" })] }));
|
|
6851
|
+
};
|
|
6852
|
+
|
|
6853
|
+
var css_248z$g = ".bordSidebarButtonDS{--tw-text-opacity:1;align-items:center;border-radius:.8rem;color:rgb(198 199 203/var(--tw-text-opacity));display:flex;font-size:1.4rem;gap:.8rem;line-height:1.8rem;padding:.8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:17.2rem}.bordSidebarButtonDS.selected:not(:disabled){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(28 50 59/var(--tw-bg-opacity));color:rgb(34 207 171/var(--tw-text-opacity))}.bordSidebarButtonDS:hover:not(:disabled){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.bordSidebarButtonDS:disabled{--tw-text-opacity:1;background-color:transparent;color:rgb(98 108 130/var(--tw-text-opacity));cursor:not-allowed}.bordSidebarButtonDS.closed{width:4rem}";
|
|
6854
|
+
styleInject(css_248z$g);
|
|
6855
|
+
|
|
6856
|
+
const BordSidebarButton = ({ isSelected = false, isOpen = true, buttonText, buttonIcon, disabled, ...rest }) => {
|
|
6857
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
6858
|
+
const selectedStyles = isSelected ? "selected" : "";
|
|
6859
|
+
const closedStyles = isOpen ? "" : "closed";
|
|
6860
|
+
const classnames = `bordSidebarButtonDS ${selectedStyles} ${closedStyles}`;
|
|
6861
|
+
const getIconColors = () => {
|
|
6862
|
+
if (disabled) {
|
|
6863
|
+
return {
|
|
6864
|
+
tone1: bordColorTheme.disabled.fgSecondary,
|
|
6865
|
+
tone2: bordColorTheme.disabled.fgSecondary,
|
|
6866
|
+
};
|
|
6867
|
+
}
|
|
6868
|
+
if (isHovered) {
|
|
6869
|
+
return {
|
|
6870
|
+
tone1: bordColorTheme.content.default,
|
|
6871
|
+
tone2: bordColorTheme.content.default,
|
|
6872
|
+
};
|
|
6873
|
+
}
|
|
6874
|
+
if (isSelected) {
|
|
6875
|
+
return {
|
|
6876
|
+
tone1: bordColorTheme.primary.bgDefault,
|
|
6877
|
+
tone2: bordColorTheme.primary.bgDefault,
|
|
6878
|
+
};
|
|
6879
|
+
}
|
|
6880
|
+
};
|
|
6881
|
+
const iconColors = getIconColors();
|
|
6882
|
+
const startHover = () => setIsHovered(true);
|
|
6883
|
+
const stoptHover = () => setIsHovered(false);
|
|
6884
|
+
useEffect(() => {
|
|
6885
|
+
return () => setIsHovered(false);
|
|
6886
|
+
}, []);
|
|
6887
|
+
return (jsxs("button", { className: classnames, disabled: disabled, onMouseEnter: startHover, onMouseLeave: stoptHover, ...rest, children: [buttonIcon && (jsx(BordTwoToneIcon, { variant: buttonIcon, colorTones: iconColors })), isOpen && buttonText] }));
|
|
6888
|
+
};
|
|
6889
|
+
|
|
6890
|
+
var css_248z$f = ".sidebarModulesListDS{margin-left:auto;margin-right:auto;width:-moz-max-content;width:max-content}.sidebarModulesListDS .bordSidebarButtonDS{margin-bottom:.4rem}";
|
|
6891
|
+
styleInject(css_248z$f);
|
|
6892
|
+
|
|
6893
|
+
const SidebarModulesList = ({ isOpen, modulesList, className = "", }) => {
|
|
6894
|
+
const classnames = `sidebarModulesListDS ${className}`;
|
|
6895
|
+
return (jsx("div", { className: classnames, children: modulesList.map(sidebarModule => {
|
|
6896
|
+
const { isSelected, buttonText, buttonIcon, onClick } = sidebarModule;
|
|
6897
|
+
return (jsx(BordSidebarButton, { isSelected: isSelected, isOpen: isOpen, buttonText: buttonText, buttonIcon: buttonIcon, onClick: onClick }, `${buttonText}`));
|
|
6898
|
+
}) }));
|
|
6899
|
+
};
|
|
6900
|
+
|
|
6901
|
+
var css_248z$e = ".bordSidebarDS{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(27 32 47/var(--tw-bg-opacity));border-color:rgb(38 43 57/var(--tw-border-opacity));border-right-width:1px;border-style:solid;border-top-width:1px;height:100vh;overflow-y:scroll;transition:all .5s ease-out;width:6.4rem}.bordSidebarDS .divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(38 43 57/var(--tw-border-opacity));border-style:solid;margin:auto auto .4rem;margin-top:calc(100vh - 49.2rem)}.bordSidebarDS.open{width:20rem}";
|
|
6902
|
+
styleInject(css_248z$e);
|
|
6903
|
+
|
|
6904
|
+
const BordSidebar = ({ isOpen, sidebarBaseModules, sidebarAdditionalModules, logoProps, }) => {
|
|
6905
|
+
const openStyles = isOpen ? "open" : "";
|
|
6906
|
+
const classnames = `bordSidebarDS ${openStyles}`;
|
|
6907
|
+
return (jsxs("div", { className: classnames, children: [jsx(SidebarLogo$1, { isOpen: isOpen, ...logoProps }), jsx(SidebarModulesList, { isOpen: isOpen, className: "baseModules", modulesList: sidebarBaseModules }), jsx("div", { className: "divider" }), jsx(SidebarModulesList, { isOpen: isOpen, className: "additionalModules", modulesList: sidebarAdditionalModules })] }));
|
|
6908
|
+
};
|
|
6909
|
+
|
|
6910
|
+
var css_248z$d = ".sidebarLogoDS{margin:2rem auto 4rem;width:-moz-max-content;width:max-content}";
|
|
6911
|
+
styleInject(css_248z$d);
|
|
6912
|
+
|
|
6913
|
+
const SidebarLogo = (props) => {
|
|
6914
|
+
return (jsx("div", { className: "sidebarLogoDS", ...props, children: jsx(BordLogo, { standardSize: 80 }) }));
|
|
6915
|
+
};
|
|
6916
|
+
|
|
6917
|
+
var css_248z$c = ".sidebarFilterValueOptionDS{height:1.8rem;margin-bottom:.4rem}.sidebarFilterValueOptionDS:last-of-type{margin-bottom:0}";
|
|
6918
|
+
styleInject(css_248z$c);
|
|
6919
|
+
|
|
6920
|
+
const SidebarFilterValueOption = ({ filterValue, clickOptionCallback, }) => {
|
|
6921
|
+
const { label, value, isSelected = false, isDisabled = false } = filterValue || {};
|
|
6922
|
+
const clickOption = () => clickOptionCallback(value, label);
|
|
6923
|
+
return (jsx("div", { className: "sidebarFilterValueOptionDS", children: jsx(BordCheckBox, { label: label, isButtonActive: isSelected, isButtonDisabled: isDisabled, handleClickButton: clickOption }) }));
|
|
6924
|
+
};
|
|
6925
|
+
|
|
6926
|
+
var css_248z$b = ".sidebarFilterDS{margin-bottom:1.6rem;overflow-y:hidden;transition:all .5s ease-out}.sidebarFilterDS:last-of-type{margin-bottom:0}.sidebarFilterDS .sidebarFilterTitle{align-items:center;cursor:pointer;display:flex;justify-content:space-between;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sidebarFilterDS .sidebarFilterTitle .sidebarFilterName{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.4rem;line-height:1.8rem}.sidebarFilterDS .filterOptionsContainer{margin-top:.8rem}";
|
|
6927
|
+
styleInject(css_248z$b);
|
|
6928
|
+
|
|
6929
|
+
const SidebarFilter = ({ filterData, updateFiltersCallback, showSkeletonLoader, }) => {
|
|
6930
|
+
const [isFilterOpen, setIsFilterOpen] = useState();
|
|
6931
|
+
const { filterIdentifier, filterName, filterValues } = filterData || {};
|
|
6932
|
+
const sidebarFilterTitleIcon = isFilterOpen ? 'arrowHeadUp' : 'arrowHeadDown';
|
|
6933
|
+
const someFilterIsSelected = !!filterData?.filterValues?.some(filter => filter.isSelected);
|
|
6934
|
+
const showOpened = isFilterOpen || (someFilterIsSelected && typeof isFilterOpen === 'undefined');
|
|
6935
|
+
// These calculations are made in rem value // These calculations are made in rem valuess
|
|
6936
|
+
const closedHeight = 1.4;
|
|
6937
|
+
const oneOptionHeight = 2.1;
|
|
6938
|
+
const visibleOptions = (filterValues?.length || 0) + 1;
|
|
6939
|
+
const openHeight = visibleOptions * oneOptionHeight + closedHeight;
|
|
6940
|
+
const sidebarFilterHeight = showOpened ? openHeight : closedHeight;
|
|
6941
|
+
const loading = showSkeletonLoader || !filterData?.filterValues || !updateFiltersCallback;
|
|
6942
|
+
const skeletonClassnames = 'sidebarFilterDS mx-auto rounded-md animationLoader';
|
|
6943
|
+
const openOrCloseFilter = () => setIsFilterOpen(!isFilterOpen);
|
|
6944
|
+
const clickOptionCallback = (value, label) => {
|
|
6945
|
+
if (!updateFiltersCallback || !filterIdentifier)
|
|
6946
|
+
return;
|
|
6947
|
+
updateFiltersCallback(filterIdentifier, value, label);
|
|
6948
|
+
};
|
|
6949
|
+
if (loading)
|
|
6950
|
+
return jsx("div", { className: skeletonClassnames, style: { height: `${sidebarFilterHeight}rem` } });
|
|
6951
|
+
return (jsxs("div", { className: "sidebarFilterDS", style: { height: `${sidebarFilterHeight}rem` }, children: [jsxs("div", { className: "sidebarFilterTitle", onClick: openOrCloseFilter, children: [jsx("div", { className: "sidebarFilterName", children: filterName }), jsx(BordOneToneIcon, { variant: sidebarFilterTitleIcon, standardSize: 14 })] }), jsx("div", { className: "filterOptionsContainer", children: filterValues?.map(filterValue => {
|
|
6952
|
+
return (jsx(SidebarFilterValueOption, { filterValue: filterValue, clickOptionCallback: clickOptionCallback }, `${filterValue?.label}`));
|
|
6953
|
+
}) })] }));
|
|
6954
|
+
};
|
|
6955
|
+
|
|
6956
|
+
var css_248z$a = ".sidebarFiltersSectionDS{height:calc(100vh - 54.2rem);margin-left:auto;margin-right:auto;overflow-y:auto;padding-left:.8rem;padding-right:.8rem;width:18.4rem}.sidebarFiltersSectionDS::-webkit-scrollbar{height:.2rem;width:.2rem}.sidebarFiltersSectionDS::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.sidebarFiltersSectionDS::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}";
|
|
6957
|
+
styleInject(css_248z$a);
|
|
6958
|
+
|
|
6959
|
+
const SidebarFiltersSection = ({ filters, updateFiltersCallback, showSkeletonLoader = false, }) => {
|
|
6960
|
+
return (jsxs("div", { className: "sidebarFiltersSectionDS", children: [showSkeletonLoader && [0, 1, 2, 3].map(id => jsx(SidebarFilter, {}, id)), !showSkeletonLoader &&
|
|
6961
|
+
filters?.map(filterData => {
|
|
6962
|
+
return (jsx(SidebarFilter, { filterData: filterData, updateFiltersCallback: updateFiltersCallback, showSkeletonLoader: showSkeletonLoader }, `dynamicFilter${filterData.filterIdentifier}`));
|
|
6963
|
+
})] }));
|
|
6964
|
+
};
|
|
6965
|
+
|
|
6966
|
+
var css_248z$9 = ".suggestionFilterDS{margin-bottom:1.6rem;overflow-y:hidden;transition:all .5s ease-out}.suggestionFilterDS:last-of-type{margin-bottom:0}.suggestionFilterDS .suggestionFilterName{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.4rem;line-height:1.8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.suggestionFilterDS .filterOptionsContainer{margin-top:.8rem}";
|
|
6967
|
+
styleInject(css_248z$9);
|
|
6968
|
+
|
|
6969
|
+
const SuggestionFilter = ({ filterData, updateFiltersCallback, }) => {
|
|
6970
|
+
const { filterIdentifier, filterName, filterValues } = filterData;
|
|
6971
|
+
const clickOptionCallback = (value, label) => updateFiltersCallback(filterIdentifier, value, label);
|
|
6972
|
+
return (jsxs("div", { className: "suggestionFilterDS", children: [jsx("div", { className: "suggestionFilterName", children: filterName }), jsx("div", { className: "filterOptionsContainer", children: filterValues.map(filterValue => {
|
|
6973
|
+
return (jsx(SidebarFilterValueOption, { filterValue: filterValue, clickOptionCallback: clickOptionCallback }, `${filterValue?.label}`));
|
|
6974
|
+
}) })] }));
|
|
6975
|
+
};
|
|
6976
|
+
|
|
6977
|
+
var css_248z$8 = ".sidebarSuggestionsFiltersDS{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));border-radius:.6rem;bottom:7.6rem;height:33.2rem;left:1.2rem;padding:1.6rem 1.2rem;position:absolute;width:17.6rem}.sidebarSuggestionsFiltersDS .question{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1.2rem;font-weight:700;line-height:1.5rem;margin-bottom:1.6rem;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sidebarSuggestionsFiltersDS .suggestionFiltersSection{height:26rem;overflow-y:auto}.sidebarSuggestionsFiltersDS .suggestionFiltersSection::-webkit-scrollbar{height:.2rem;width:.2rem}.sidebarSuggestionsFiltersDS .suggestionFiltersSection::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.sidebarSuggestionsFiltersDS .suggestionFiltersSection::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}";
|
|
6978
|
+
styleInject(css_248z$8);
|
|
6979
|
+
|
|
6980
|
+
const SidebarSuggestionsFilters = ({ filters, updateFiltersCallback, sidebarSuggestionFiltersTitle, showSkeletonLoader = false, }) => {
|
|
6981
|
+
if (showSkeletonLoader)
|
|
6982
|
+
return jsx("div", { className: "sidebarSuggestionsFiltersDS animationLoader" });
|
|
6983
|
+
return (jsxs("div", { className: "sidebarSuggestionsFiltersDS", children: [jsx("div", { className: "question", children: sidebarSuggestionFiltersTitle }), jsx("div", { className: "suggestionFiltersSection", children: filters.map(filterData => {
|
|
6984
|
+
return (jsx(SuggestionFilter, { updateFiltersCallback: updateFiltersCallback, filterData: filterData }, `dynamicFilter${filterData.filterIdentifier}`));
|
|
6985
|
+
}) })] }));
|
|
6986
|
+
};
|
|
6987
|
+
|
|
6988
|
+
var css_248z$7 = ".bordTextButtonDS{cursor:pointer;gap:.4rem;height:-moz-max-content;height:max-content;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content}.bordTextButtonDS,.bordTextButtonDS .text{align-items:center;display:flex}.bordTextButtonDS .text{--tw-text-opacity:1;align-content:center;color:rgb(34 207 171/var(--tw-text-opacity));font-size:1rem}.bordTextButtonDS .hoverElementContainer{display:none}.bordTextButtonDS.disabled{cursor:not-allowed}.bordTextButtonDS.disabled svg path{stroke:#626c82}.bordTextButtonDS.disabled .text{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextButtonDS:hover .hoverElementContainer{display:block}";
|
|
6989
|
+
styleInject(css_248z$7);
|
|
6990
|
+
|
|
6991
|
+
/**
|
|
6992
|
+
* @property { string } text - The text to show in the link like button
|
|
6993
|
+
* @property { string } customClassname - A classname for custom styles
|
|
6994
|
+
* @property { IbordOneToneIconProps } leftIconProps - The props of the left icon.
|
|
6995
|
+
* @property { IbordOneToneIconProps } rightIconProps - The props of the right icon.
|
|
6996
|
+
* @property { boolean } isDisabled - A boolean indicating if the button is disabled
|
|
6997
|
+
* @property { JSX.Element } explainingHover - A jsx element to display when the button is hovered, as to be used in the explaination of its action or state
|
|
6998
|
+
*/
|
|
6999
|
+
const BordTextButton = ({ text, isDisabled, explainingHover, onClick, className: customClassName = '', leftIconProps, rightIconProps, textProps, }) => {
|
|
7000
|
+
const disabledStyles = isDisabled ? 'disabled' : '';
|
|
7001
|
+
const classnames = `bordTextButtonDS ${disabledStyles} ${customClassName}`;
|
|
7002
|
+
const onClickCallback = isDisabled ? undefined : onClick;
|
|
7003
|
+
const defaultStroke = isDisabled ? bordColorTheme.disabled.bgPrimary : bordColorTheme.primary.bgDefault;
|
|
7004
|
+
const leftIconStroke = leftIconProps?.stroke || defaultStroke;
|
|
7005
|
+
const rightIconStroke = rightIconProps?.stroke || defaultStroke;
|
|
7006
|
+
return (jsxs("div", { className: classnames, onClick: onClickCallback, children: [leftIconProps && jsx(BordOneToneIcon, { ...leftIconProps, stroke: leftIconStroke }), jsx("div", { className: "text", ...textProps, children: text }), rightIconProps && jsx(BordOneToneIcon, { ...rightIconProps, stroke: rightIconStroke }), explainingHover && jsx("div", { className: "hoverElementContainer", children: explainingHover })] }));
|
|
7007
|
+
};
|
|
7008
|
+
|
|
7009
|
+
var css_248z$6 = ".bordSidebarWithFiltersDS{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(27 32 47/var(--tw-bg-opacity));border-color:rgb(38 43 57/var(--tw-border-opacity));border-right-width:1px;border-style:solid;border-top-width:1px;height:100vh;overflow-y:scroll;position:relative;transition:all .5s ease-out;width:20rem}.bordSidebarWithFiltersDS .bordTextButton{align-items:center;bottom:2rem;display:flex;justify-content:center;left:3rem;padding-bottom:1.2rem;padding-top:1.2rem;position:absolute;width:14rem}.bordSidebarWithFiltersDS .filtersTitle{align-items:center;display:flex;gap:.8rem;margin-bottom:1.6rem;padding-left:1.6rem;padding-right:1.6rem;width:-moz-max-content;width:max-content}.bordSidebarWithFiltersDS .filtersTitle .title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.6rem;font-weight:500;line-height:2.1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}";
|
|
7010
|
+
styleInject(css_248z$6);
|
|
7011
|
+
|
|
7012
|
+
const BordSidebarWithFilters = ({ title, logoProps, dynamicFilters, suggestionFilters, updateFiltersCallback, sidebarSuggestionFiltersTitle, cleanFiltersButtonProps, loadingDynamicFilters, loadingSuggestionFilters, ...rest }) => {
|
|
7013
|
+
const classnames = `bordSidebarWithFiltersDS`;
|
|
7014
|
+
const isOpen = true;
|
|
7015
|
+
const clearFiltersButtonColor = bordColorTheme.content.secondary ;
|
|
7016
|
+
return (jsxs("div", { className: classnames, ...rest, children: [jsx(SidebarLogo, { isOpen: isOpen, ...logoProps }), jsxs("div", { className: "filtersTitle", children: [jsx(BordOneToneIcon, { variant: "filterMailCircle", stroke: "white", customWidth: "1.8rem" }), jsx("div", { className: "title", children: title })] }), jsx(SidebarFiltersSection, { filters: dynamicFilters, updateFiltersCallback: updateFiltersCallback, showSkeletonLoader: loadingDynamicFilters }), jsx(SidebarSuggestionsFilters, { filters: suggestionFilters, updateFiltersCallback: updateFiltersCallback, sidebarSuggestionFiltersTitle: sidebarSuggestionFiltersTitle, showSkeletonLoader: loadingSuggestionFilters }), jsx(BordTextButton, { text: 'Clean filters', textProps: { style: { color: bordColorTheme.content.secondary } }, rightIconProps: { variant: 'xCircle', standardSize: 14, stroke: clearFiltersButtonColor }, ...cleanFiltersButtonProps })] }));
|
|
7017
|
+
};
|
|
7018
|
+
|
|
7019
|
+
var STATUS_VARIANTS;
|
|
7020
|
+
(function (STATUS_VARIANTS) {
|
|
7021
|
+
STATUS_VARIANTS["default"] = "default";
|
|
7022
|
+
STATUS_VARIANTS["informative"] = "informative";
|
|
7023
|
+
STATUS_VARIANTS["success"] = "success";
|
|
7024
|
+
STATUS_VARIANTS["danger"] = "danger";
|
|
7025
|
+
})(STATUS_VARIANTS || (STATUS_VARIANTS = {}));
|
|
7026
|
+
|
|
7027
|
+
var css_248z$5 = ".bordCircleDS{border-radius:.4rem;height:.8rem;width:.8rem}";
|
|
7028
|
+
styleInject(css_248z$5);
|
|
7029
|
+
|
|
7030
|
+
const Circle = ({ variant = "default" }) => {
|
|
7031
|
+
const renderVariants = {
|
|
7032
|
+
[STATUS_VARIANTS.default]: "bg-disabled-fg-primary",
|
|
7033
|
+
[STATUS_VARIANTS.informative]: "bg-informative-bg-primary",
|
|
7034
|
+
[STATUS_VARIANTS.success]: "bg-success",
|
|
7035
|
+
[STATUS_VARIANTS.danger]: "bg-danger",
|
|
7036
|
+
};
|
|
7037
|
+
return jsx("div", { className: `bordCircleDS ${renderVariants[variant]}` });
|
|
7038
|
+
};
|
|
7039
|
+
|
|
7040
|
+
var css_248z$4 = ".bordStatusDS{--tw-text-opacity:1;align-items:center;border-radius:2.4rem;border-width:1px;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-size:1.2rem;gap:.4rem;justify-content:center;line-height:1.5rem;padding:.4rem .8rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content}";
|
|
7041
|
+
styleInject(css_248z$4);
|
|
7042
|
+
|
|
7043
|
+
const BordStatus = ({ variant = "default", label = "Label", }) => {
|
|
7044
|
+
const renderVariants = {
|
|
7045
|
+
[STATUS_VARIANTS.default]: "border-disabled-fg-primary",
|
|
7046
|
+
[STATUS_VARIANTS.informative]: "border-informative-bg-primary",
|
|
7047
|
+
[STATUS_VARIANTS.success]: "border-success",
|
|
7048
|
+
[STATUS_VARIANTS.danger]: "border-danger",
|
|
7049
|
+
};
|
|
7050
|
+
return (jsxs("div", { className: `bordStatusDS ${renderVariants[variant]}`, children: [jsx(Circle, { variant: variant }), jsx("span", { children: label })] }));
|
|
7051
|
+
};
|
|
7052
|
+
|
|
7053
|
+
const InProgressStepper = () => {
|
|
7054
|
+
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: 32, height: 32, children: [jsx("rect", { width: "31", height: "31", x: ".5", y: ".5", stroke: "#23A5FF", rx: "15.5" }), jsx("rect", { width: "26", height: "26", x: "3", y: "3", fill: "#23A5FF", rx: "13" }), jsx("g", { clipPath: "url(#a)", children: jsx("path", { stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.1", d: "M16 19.5v2.334m2.473-3.36 1.65 1.65m-8.248 0 1.651-1.65M19.499 16h2.334m-11.667 0h2.333m5.974-2.473 1.65-1.65m-8.248 0 1.651 1.65m2.473-3.36V12.5" }) }), jsx("defs", { children: jsx("clipPath", { id: "a", children: jsx("path", { fill: "#fff", d: "M9 9h14v14H9z" }) }) })] }));
|
|
7055
|
+
};
|
|
7056
|
+
|
|
7057
|
+
const WaitingStepperIcon = () => {
|
|
7058
|
+
return (jsxs("svg", { width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "25", height: "25", rx: "12.5", stroke: "#262B39" }), jsx("g", { clipPath: "url(#clip0_1369_63681)", children: jsx("path", { d: "M12.9993 9.50033V13.0003L15.3327 14.167M18.8327 13.0003C18.8327 16.222 16.221 18.8337 12.9993 18.8337C9.77769 18.8337 7.16602 16.222 7.16602 13.0003C7.16602 9.77866 9.77769 7.16699 12.9993 7.16699C16.221 7.16699 18.8327 9.77866 18.8327 13.0003Z", stroke: "#626C82", strokeWidth: "1.1", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_1369_63681", children: jsx("rect", { width: "14", height: "14", fill: "white", transform: "translate(6 6)" }) }) })] }));
|
|
7059
|
+
};
|
|
7060
|
+
|
|
7061
|
+
const SuccessStepperIcon = () => {
|
|
7062
|
+
return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 26 30", width: 26, height: 26, children: [jsx("rect", { width: "26", height: "26", y: "2", fill: "#09A432", rx: "13" }), jsx("path", { stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.1", d: "m17.667 11.5-6.416 6.417L8.334 15" })] }));
|
|
7063
|
+
};
|
|
7064
|
+
|
|
7065
|
+
var css_248z$3 = ".bordStepperDS{align-items:center;display:flex;line-height:.75rem;width:-moz-max-content;width:max-content}.bordStepperDS .progressStep{--tw-text-opacity:1;align-items:flex-start;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;flex-direction:column}.bordStepperDS .stepConectorAndStatusContainer{align-items:center;display:flex}.bordStepperDS .titleAndSubtitleContainer{margin-top:1.6rem}.bordStepperDS .titleAndSubtitleContainer .subTitleContainer{align-items:center;display:flex;gap:.4rem}.bordStepperDS .titleAndSubtitleContainer .subTitleContainer .subTitle{text-wrap:nowrap;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-size:1.4rem;line-height:1.8rem}.bordStepperDS .titleStepper{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity));font-size:1rem}.bordStepperDS .inProgressConectorContainer{display:flex;height:.1rem;margin-left:.2rem;margin-right:.2rem;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordStepperDS .inProgressConectorContainer .inProgressConectorFirst{--tw-bg-opacity:1;background-color:rgb(35 165 255/var(--tw-bg-opacity));height:.1rem;width:100%}.bordStepperDS .inProgressConectorContainer .inProgressConectorSecond{--tw-bg-opacity:1;background-color:rgb(98 108 130/var(--tw-bg-opacity));height:.1rem;width:100%}.bordStepperDS .successConector{background-color:rgb(0 153 79/var(--tw-bg-opacity))}.bordStepperDS .successConector,.bordStepperDS .waitingConector{--tw-bg-opacity:1;height:.1rem;margin-left:.2rem;margin-right:.2rem;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordStepperDS .waitingConector{background-color:rgb(98 108 130/var(--tw-bg-opacity))}.bordProgressBarSkeletonLoader{align-items:center;display:flex;gap:.4rem;width:-moz-max-content;width:max-content}.bordProgressBarSkeletonLoader .stepSkeleton{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity));border-radius:15998.4rem}.bordProgressBarSkeletonLoader .skeletonConector{height:.1rem;min-width:19rem}";
|
|
7066
|
+
styleInject(css_248z$3);
|
|
7067
|
+
|
|
7068
|
+
const ProgressBarSkeletonLoader = ({ skeletonSteps, firstAndLastConectorWidth, intermediateStepsConectorWidth, heightStyles, }) => {
|
|
7069
|
+
const renderSkeletonStep = (skeletonStep, index) => {
|
|
7070
|
+
const isLastStep = index === skeletonSteps.length - 1;
|
|
7071
|
+
const widthStyles = skeletonStep.stepWidth ?? 30;
|
|
7072
|
+
const firstSkeletonLeftMargin = skeletonStep.order === 0 ? firstAndLastConectorWidth : undefined;
|
|
7073
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: "stepSkeleton animationLoader", style: {
|
|
7074
|
+
...skeletonStep.customStepStyles,
|
|
7075
|
+
width: widthStyles,
|
|
7076
|
+
marginLeft: firstSkeletonLeftMargin,
|
|
7077
|
+
marginRight: intermediateStepsConectorWidth,
|
|
7078
|
+
height: heightStyles ?? 30,
|
|
7079
|
+
} }, `skeletonStep${skeletonStep.order}`), !isLastStep && (jsx("div", { className: "animationLoader skeletonConector" }))] }));
|
|
7080
|
+
};
|
|
7081
|
+
return (jsx("div", { className: "bordProgressBarSkeletonLoader", children: skeletonSteps.map(renderSkeletonStep) }));
|
|
7082
|
+
};
|
|
7083
|
+
|
|
7084
|
+
var STEPPER_STATE;
|
|
7085
|
+
(function (STEPPER_STATE) {
|
|
7086
|
+
STEPPER_STATE["inProgress"] = "inProgress";
|
|
7087
|
+
STEPPER_STATE["waiting"] = "waiting";
|
|
7088
|
+
STEPPER_STATE["success"] = "success";
|
|
7089
|
+
})(STEPPER_STATE || (STEPPER_STATE = {}));
|
|
7090
|
+
|
|
7091
|
+
/**
|
|
7092
|
+
@property { IprogressStepData[] } steps - An array with the information for each step of the progress bar, including the folowing data: order (number), stepContent (JSX.Element), stepWidth (number), customStepStyles ({ [key: string]: string })
|
|
7093
|
+
@property { number } currentStep -A number indicating the index of the step in the steps array that should be display as current
|
|
7094
|
+
@property { number } firstAndLastConectorWidth - The width in pixels (only the number) for the first and last connector lines of the progress bar (the ones coneecting to the points)
|
|
7095
|
+
@property { number } intermediateStepsConectorWidth - The width in pixels (only the number) for the connector lines connecting the different steps of the progress bar
|
|
7096
|
+
@property { number } customHeight - The height of the boxes for the steps of the progress bar, ie the height of the component as a whole
|
|
7097
|
+
@property { IprogressStepData[] } skeletonSteps - An array with the information for each of the skeleton steps. Can contain the same data as the steps property, but the most relevant are the order and stepWidth, that should be equal to that of the steps in the steps property
|
|
7098
|
+
*/
|
|
7099
|
+
const BordStepper = ({ steps, currentStep, firstAndLastConectorWidth, intermediateStepsConectorWidth, customHeight, customStepperClassname, skeletonSteps = [], loading, isStepContent = true, }) => {
|
|
7100
|
+
const heightStyles = customHeight ?? undefined;
|
|
7101
|
+
const renderTypeStep = ({ currentStep, step, }) => {
|
|
7102
|
+
if (currentStep === step)
|
|
7103
|
+
return STEPPER_STATE.inProgress;
|
|
7104
|
+
if (currentStep > step)
|
|
7105
|
+
return STEPPER_STATE.success;
|
|
7106
|
+
if (currentStep < step)
|
|
7107
|
+
return STEPPER_STATE.waiting;
|
|
7108
|
+
return STEPPER_STATE.inProgress;
|
|
7109
|
+
};
|
|
7110
|
+
if (loading)
|
|
7111
|
+
return (jsx(ProgressBarSkeletonLoader, { skeletonSteps: skeletonSteps, firstAndLastConectorWidth: firstAndLastConectorWidth, intermediateStepsConectorWidth: intermediateStepsConectorWidth, heightStyles: heightStyles }));
|
|
7112
|
+
return (jsx("div", { className: `bordStepperDS ${customStepperClassname ?? ""}`, children: steps.map(({ order = 0, customStepStyles, stepContent, title = "title", subTitle = "subTitle", isTooltipMessage = false, tooltipMessage = "message", }, index) => {
|
|
7113
|
+
const isLastStep = index === steps.length - 1;
|
|
7114
|
+
const stepCurrent = renderTypeStep({ currentStep, step: index });
|
|
7115
|
+
const renderConector = {
|
|
7116
|
+
[STEPPER_STATE.inProgress]: (jsxs("div", { className: "inProgressConectorContainer", children: [jsx("div", { className: "inProgressConectorFirst" }), jsx("div", { className: "inProgressConectorSecond" })] })),
|
|
7117
|
+
[STEPPER_STATE.success]: jsx("div", { className: "successConector" }),
|
|
7118
|
+
[STEPPER_STATE.waiting]: jsx("div", { className: "waitingConector" }),
|
|
7119
|
+
};
|
|
7120
|
+
const renderIcon = {
|
|
7121
|
+
[STEPPER_STATE.inProgress]: jsx(InProgressStepper, {}),
|
|
7122
|
+
[STEPPER_STATE.success]: jsx(SuccessStepperIcon, {}),
|
|
7123
|
+
[STEPPER_STATE.waiting]: jsx(WaitingStepperIcon, {}),
|
|
7124
|
+
};
|
|
7125
|
+
const renderTooltip = isTooltipMessage ? (jsx(BordTooltip, { message: tooltipMessage, children: jsx(BordOneToneIcon, { variant: "info", customWidth: "1.2rem" }) })) : (jsx(Fragment, {}));
|
|
7126
|
+
const renderStepContent = isStepContent ? ((stepContent ?? jsx(Fragment, {}))) : (jsxs(Fragment, { children: [jsx("div", { className: "titleStepper", children: title }), jsxs("div", { className: "subTitleContainer", children: [jsx("span", { className: "subTitle", children: subTitle }), renderTooltip] })] }));
|
|
7127
|
+
return (jsxs("div", { className: `progressStep`, style: customStepStyles, children: [jsxs("div", { className: "stepConectorAndStatusContainer", children: [renderIcon[stepCurrent], !isLastStep && (jsx("div", { className: "min-w-190 w-full mb-3", children: renderConector[stepCurrent] }))] }), jsx("div", { className: "titleAndSubtitleContainer", children: renderStepContent })] }, `progressStep${order}`));
|
|
7128
|
+
}) }));
|
|
7129
|
+
};
|
|
7130
|
+
|
|
7131
|
+
var css_248z$2 = ".bordTextAreaDS{display:flex;flex-direction:column;font-size:1.4rem;gap:.8rem;line-height:1.8rem}.bordTextAreaDS,.bordTextAreaDS .bordTextAreaLabel{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity))}.bordTextAreaDS .bordTextAreaContent{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-style:solid;border-width:1px;color:rgb(98 108 130/var(--tw-text-opacity));display:flex;gap:.8rem;height:100%;padding:1.2rem;width:100%}.bordTextAreaDS .bordTextAreaContent .bordTextAreaIcon{padding-top:.2rem}.bordTextAreaDS .bordTextAreaContent .bordTextAreaIcon svg path{stroke:#626c82}.bordTextAreaDS .bordTextAreaContent .bordTextAreaIcon:focus-within svg path{stroke:#fff}.bordTextAreaDS .bordTextAreaContent .bordTextAreaInput{background-color:transparent;padding-top:0;resize:none}.bordTextAreaDS .bordTextAreaContent .bordTextAreaInput:focus-visible{outline:2px solid transparent;outline-offset:2px}.bordTextAreaDS .bordTextAreaContent:focus-within{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(34 207 171/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextAreaDS:hover .bordTextAreaContent{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextAreaDS:hover .bordTextAreaContent .bordTextAreaIcon svg path{stroke:#fff}.bordTextAreaDS:focus .bordTextAreaContent{border-color:rgb(34 207 171/var(--tw-border-opacity))}.bordTextAreaDS.filled .bordTextAreaContent,.bordTextAreaDS:focus .bordTextAreaContent{--tw-border-opacity:1;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.bordTextAreaDS.filled .bordTextAreaContent{border-color:rgb(98 108 130/var(--tw-border-opacity))}.bordTextAreaDS.filled .bordTextAreaContent .bordTextAreaIcon svg path{stroke:#fff}.bordTextAreaDS.error,.bordTextAreaDS.error .bordTextAreaLabel{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextAreaDS.error .bordTextAreaContent{--tw-border-opacity:1;border-color:rgb(252 84 61/var(--tw-border-opacity))}.bordTextAreaDS.error .bordTextAreaContent .bordTextAreaIcon svg path{stroke:#fc543d}.bordTextAreaDS.error .bordTextAreaContent .bordTextAreaInput::-moz-placeholder{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextAreaDS.error .bordTextAreaContent .bordTextAreaInput::placeholder{--tw-text-opacity:1;color:rgb(252 84 61/var(--tw-text-opacity))}.bordTextAreaDS.disabled,.bordTextAreaDS.disabled .bordTextAreaLabel{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextAreaDS.disabled .bordTextAreaContent{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));color:rgb(98 108 130/var(--tw-text-opacity));cursor:not-allowed}.bordTextAreaDS.disabled .bordTextAreaContent s .bordTextAreaIcon svg path{stroke:#626c82}.bordTextAreaDS.disabled .bordTextAreaContent .bordTextAreaInput{cursor:not-allowed}.bordTextAreaDS.disabled .bordTextAreaContent .bordTextAreaInput::-moz-placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextAreaDS.disabled .bordTextAreaContent .bordTextAreaInput::placeholder{--tw-text-opacity:1;color:rgb(98 108 130/var(--tw-text-opacity))}.bordTextAreaDS.disabled .bordTextAreaContent:hover svg path{stroke:#626c82}.bordTextAreaDS .bordTextAreaInfo{display:flex;justify-content:space-between}.bordButtonSkeletonLoader{cursor:pointer;display:flex;flex-direction:column;padding:.4rem}.bordButtonSkeletonLoader .skeletonLabel{margin-bottom:.4rem;padding:.4rem;width:4rem}.bordButtonSkeletonLoader .skeletonContent,.bordButtonSkeletonLoader .skeletonLabel{text-wrap:wrap;font-size:1.2rem;font-weight:400;line-height:1.5rem}.bordButtonSkeletonLoader .skeletonContent{--tw-border-opacity:1;border-color:rgb(98 108 130/var(--tw-border-opacity));border-radius:.6rem;border-width:1px;padding:2rem}.bordButtonSkeletonLoader .skeletonInfo{display:flex;justify-content:space-between}.bordButtonSkeletonLoader .skeletonInfo .skeletonCaption,.bordButtonSkeletonLoader .skeletonInfo .skeletonDescription{margin-top:.4rem;padding:.4rem;width:4rem}";
|
|
7132
|
+
styleInject(css_248z$2);
|
|
7133
|
+
|
|
7134
|
+
const BordTextArea = ({ placeholder, name, rows = 5, cols = 50, leftIconVariant, label, customWidth, filled = false, errorText, hideError, isDisabled = false, setInputValue, value, captionText, maxLength = 1000, isLoading = false, }) => {
|
|
7135
|
+
const className = `bordTextAreaDS ${filled ? "filled" : ""} ${errorText && hideError ? "error" : ""} ${isDisabled ? "disabled" : ""}`;
|
|
7136
|
+
const caption = captionText ? captionText : errorText;
|
|
7137
|
+
const skeletonMain = `bordButtonSkeletonLoader ${customWidth}`;
|
|
7138
|
+
const handleInputChange = (event) => {
|
|
7139
|
+
const { value } = event.target;
|
|
7140
|
+
if (setInputValue) {
|
|
7141
|
+
setInputValue(value);
|
|
7142
|
+
}
|
|
7143
|
+
};
|
|
7144
|
+
if (isLoading) {
|
|
7145
|
+
return (jsxs("div", { className: skeletonMain, style: { width: customWidth }, children: [jsx("div", { className: "skeletonLabel animationLoader" }), jsx("div", { className: "skeletonContent animationLoader" }), jsxs("div", { className: "skeletonInfo", children: [jsx("div", { className: "skeletonCaption animationLoader" }), jsx("div", { className: "skeletonDescription animationLoader" })] })] }));
|
|
7146
|
+
}
|
|
7147
|
+
return (jsxs("div", { className: className, style: { width: customWidth }, children: [jsx("div", { className: "bordTextAreaLabel", children: label }), jsxs("div", { className: "bordTextAreaContent", children: [leftIconVariant && (jsx("div", { className: "bordTextAreaIcon", children: jsx(BordOneToneIcon, { variant: leftIconVariant, standardSize: 14 }) })), jsx("textarea", { className: "bordTextAreaInput", placeholder: placeholder, name: name, rows: rows, cols: cols, disabled: isDisabled, onChange: handleInputChange, maxLength: maxLength })] }), jsxs("div", { className: "bordTextAreaInfo", children: [jsx("div", { className: "bordTextAreaCaption", children: caption }), value && (jsxs("div", { className: "bordTextAreaValue", children: [value.length, "/", maxLength] }))] })] }));
|
|
7148
|
+
};
|
|
7149
|
+
|
|
7150
|
+
var css_248z$1 = ".bordToolsPhotos{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(98 108 130/var(--tw-border-opacity));border-style:solid;border-width:.2rem;padding:.8rem}.bordToolsPhotos.rounded{border-radius:15998.4rem}.bordToolsPhotos.square{border-radius:1.2rem}";
|
|
7151
|
+
styleInject(css_248z$1);
|
|
7152
|
+
|
|
7153
|
+
const BordToolsPhotos = ({ url, size, customSize, variant = "square", }) => {
|
|
7154
|
+
const renderSize = customSize ? customSize : size;
|
|
7155
|
+
return (jsx("img", { className: `bordToolsPhotos ${renderSize} ${variant}`, src: url }));
|
|
7156
|
+
};
|
|
7157
|
+
|
|
6275
7158
|
var css_248z = "/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}:root{--ds-c-layout-bg:#fafaf9;--ds-c-layout-l1:#fff;--ds-c-layout-l2:#fafaf9;--ds-c-layout-l3:#f1f1f1;--ds-c-primary-fg-default:#fff;--ds-c-primary-bg-default:#00b188;--ds-c-primary-bg-hover:#1b9f88;--ds-c-primary-bg-secondary:#00b1881a;--ds-c-secondary-bg-default:#ebebeb;--ds-c-content-default:#070f21;--ds-c-content-secondary:#6f737d;--ds-c-stroke-default:#e6e6e6;--ds-c-stroke-interactive:#b4b4b4;--ds-c-bool-info-fg:#4096f0;--ds-c-bool-info-bg:#dff2ff;--ds-c-bool-info-bg-op:#23a5ff1a;--ds-c-bool-success-fg:#00994f;--ds-c-bool-success-bg:#eaf9f4;--ds-c-bool-success-bg-op:#09a4321a;--ds-c-bool-danger-fg:#de072e;--ds-c-bool-danger-bg:#ffd7dc;--ds-c-bool-danger-bg-op:#fc543d1a;--ds-c-bool-warning-fg:#e29e28;--ds-c-bool-warning-bg:#fefbe8;--ds-c-bool-warning-bg-op:#dcc4101a;--ds-c-bool-disabled-fg:#b4b4b4;--ds-c-bool-disabled-bg:#e6e6e6;--ds-c-bool-disabled-sec-fg:#b4b4b4;--ds-c-bool-disabled-sec-bg:#e6e6e6;--ds-c-tags-blue-fg:#23a5ff;--ds-c-tags-blue-bg:#4096f0;--ds-c-comp-default:#070f21;--ds-c-comp-red:#ff6175;--ds-c-comp-blue:#0057a7;--ds-c-comp-yellow:#f5dd28;--ds-c-comp-brown:#a95c14;--ds-c-comp-pink:#e897ff;--ds-c-comp-purple:#885ef7;--ds-c-tags-blue-surface:color-mix(in srgb,var(--ds-c-tags-blue-fg) 10%,transparent);--ds-c-tags-pink-surface:color-mix(in srgb,var(--ds-c-comp-pink) 10%,transparent);--ds-c-tags-purple-surface:color-mix(in srgb,var(--ds-c-comp-purple) 10%,transparent);--ds-c-tags-brown-surface:color-mix(in srgb,var(--ds-c-comp-brown) 10%,transparent);--ds-c-tags-red-surface:color-mix(in srgb,var(--ds-c-comp-red) 10%,transparent);--ds-c-tags-yellow-surface:var(--ds-c-bool-warning-bg-op);--ds-c-tags-green-surface:var(--ds-c-bool-success-bg-op);--ds-c-modal-overlay:#070f211f}[data-theme=dark]{--ds-c-layout-bg:#070f21;--ds-c-layout-l1:#1b202f;--ds-c-layout-l2:#262b39;--ds-c-layout-l3:#1b202f;--ds-c-primary-fg-default:#070f21;--ds-c-primary-bg-default:#22cfab;--ds-c-primary-bg-hover:#60ddc3;--ds-c-primary-bg-secondary:#1c323b;--ds-c-secondary-bg-default:#1b202f;--ds-c-content-default:#fff;--ds-c-content-secondary:#c6c7cb;--ds-c-stroke-default:#262b39;--ds-c-stroke-interactive:#626c82;--ds-c-bool-info-fg:#23a5ff;--ds-c-bool-info-bg:#052143;--ds-c-bool-info-bg-op:#23a5ff;--ds-c-bool-success-fg:#09a432;--ds-c-bool-success-bg:#00230a;--ds-c-bool-success-bg-op:#09a4321a;--ds-c-bool-danger-fg:#fc543d;--ds-c-bool-danger-bg:#210602;--ds-c-bool-danger-bg-op:#fc543d1a;--ds-c-bool-warning-fg:#dcc410;--ds-c-bool-warning-bg:#272300;--ds-c-bool-warning-bg-op:#dcc4101a;--ds-c-bool-disabled-fg:#262b39;--ds-c-bool-disabled-bg:#626c82;--ds-c-bool-disabled-sec-fg:#b4b4b4;--ds-c-bool-disabled-sec-bg:#e6e6e6;--ds-c-tags-blue-fg:#0057a7;--ds-c-tags-blue-bg:#0057a7;--ds-c-comp-default:#fff;--ds-c-comp-red:#ff6175;--ds-c-comp-blue:#0057a7;--ds-c-comp-yellow:#f5dd28;--ds-c-comp-brown:#a95c144d;--ds-c-comp-pink:#e897ff;--ds-c-comp-purple:#885ef7;--ds-c-tags-blue-surface:color-mix(in srgb,var(--ds-c-comp-blue) 30%,transparent);--ds-c-tags-pink-surface:color-mix(in srgb,var(--ds-c-comp-pink) 30%,transparent);--ds-c-tags-purple-surface:color-mix(in srgb,var(--ds-c-comp-purple) 30%,transparent);--ds-c-tags-brown-surface:var(--ds-c-comp-brown);--ds-c-tags-red-surface:color-mix(in srgb,var(--ds-c-comp-red) 30%,transparent);--ds-c-tags-yellow-surface:color-mix(in srgb,var(--ds-c-comp-yellow) 30%,transparent);--ds-c-tags-green-surface:color-mix(in srgb,var(--ds-c-bool-success-fg) 30%,transparent);--ds-c-modal-overlay:#885ef74d}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(64,150,240,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(64,150,240,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:400px){.container{max-width:400px}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1440px){.container{max-width:1440px}}@media (min-width:1920px){.container{max-width:1920px}}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:.3rem}.mb-auto{margin-bottom:auto}.mt-50{margin-top:5rem}.box-border{box-sizing:border-box}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-100{height:10rem}.h-200{height:20rem}.h-300{height:30rem}.h-32{height:3.2rem}.h-50{height:5rem}.h-500{height:50rem}.h-56{height:5.6rem}.h-64{height:6.4rem}.h-80{height:8rem}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[calc\\(100vh-12rem\\)\\]{min-height:calc(100vh - 12rem)}.w-1000{width:100rem}.w-180{width:18rem}.w-24{width:2.4rem}.w-280{width:28rem}.w-300{width:30rem}.w-380{width:38rem}.w-500{width:50rem}.w-80{width:8rem}.w-full{width:100%}.w-min{width:-moz-min-content;width:min-content}.w-screen{width:100vw}.min-w-0{min-width:0}.min-w-190{min-width:19rem}.max-w-\\[40rem\\]{max-width:40rem}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.1rem}.gap-3{gap:.3rem}.gap-4{gap:.4rem}.overflow-auto{overflow:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.4rem}.rounded-full{border-radius:15998.4rem}.rounded-md{border-radius:.6rem}.border-danger{--tw-border-opacity:1;border-color:rgb(252 84 61/var(--tw-border-opacity))}.border-disabled-fg-primary{--tw-border-opacity:1;border-color:rgb(38 43 57/var(--tw-border-opacity))}.border-informative-bg-primary{--tw-border-opacity:1;border-color:rgb(35 165 255/var(--tw-border-opacity))}.border-success{--tw-border-opacity:1;border-color:rgb(0 153 79/var(--tw-border-opacity))}.\\!bg-\\[\\#EBEBEB\\]{--tw-bg-opacity:1!important;background-color:rgb(235 235 235/var(--tw-bg-opacity))!important}.bg-danger{--tw-bg-opacity:1;background-color:rgb(252 84 61/var(--tw-bg-opacity))}.bg-disabled-fg-primary{--tw-bg-opacity:1;background-color:rgb(38 43 57/var(--tw-bg-opacity))}.bg-informative-bg-primary{--tw-bg-opacity:1;background-color:rgb(35 165 255/var(--tw-bg-opacity))}.bg-layout-backgroud{--tw-bg-opacity:1;background-color:rgb(7 15 33/var(--tw-bg-opacity))}.bg-layout-level1-opacity{background-color:#1b202fcc}.bg-navy-blue-900{--tw-bg-opacity:1;background-color:rgb(7 15 33/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity:1;background-color:rgb(0 153 79/var(--tw-bg-opacity))}.bg-theme-layout-background{background-color:var(--ds-c-layout-bg)}.bg-white-400{--tw-bg-opacity:1;background-color:rgb(180 180 180/var(--tw-bg-opacity))}.p-16{padding:1.6rem}.p-24{padding:2.4rem}.pb-3{padding-bottom:.3rem}.pe-20{padding-inline-end:2rem}.text-center{text-align:center}.\\!text-base{font-size:1.6rem!important;line-height:2.4rem!important}.\\!text-lg{font-size:1.8rem!important;line-height:2.8rem!important}.\\!text-xs{font-size:1.2rem!important;line-height:1.6rem!important}.text-bord-sm{font-size:1.2rem;line-height:1.5rem}.italic{font-style:italic}.\\!text-cyan-300{--tw-text-opacity:1!important;color:rgb(34 207 171/var(--tw-text-opacity))!important}.\\!text-red-300{--tw-text-opacity:1!important;color:rgb(255 97 117/var(--tw-text-opacity))!important}.\\!text-yellow-500{--tw-text-opacity:1!important;color:rgb(245 221 40/var(--tw-text-opacity))!important}.text-content-secondary{--tw-text-opacity:1;color:rgb(198 199 203/var(--tw-text-opacity))}.text-theme-content-default{color:var(--ds-c-content-default)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\[key\\:string\\]{key:string}html{font-size:62.5%}body{overflow-x:hidden;width:100vw}@keyframes shine-lines{0%{background-position:-2rem}30%,to{background-position:20rem}}.animationLoader{animation:shine-lines 1s infinite forwards;background-image:linear-gradient(90deg,#f6f7f9 0,#edeef1 20%,#f6f7f9 40%,#f6f7f9)}[data-theme=dark] .animationLoader{animation:shine-lines 1s infinite forwards;background-image:linear-gradient(90deg,#262b39 0,#3b4256 50%,#262b39)}";
|
|
6276
7159
|
styleInject(css_248z);
|
|
6277
7160
|
|
|
@@ -6903,5 +7786,5 @@ var BORD_TWO_TONE_ICONS;
|
|
|
6903
7786
|
BORD_TWO_TONE_ICONS["timer"] = "timer";
|
|
6904
7787
|
})(BORD_TWO_TONE_ICONS || (BORD_TWO_TONE_ICONS = {}));
|
|
6905
7788
|
|
|
6906
|
-
export { BORD_AVATARS, BORD_ILUSTRATION_ICONS, BORD_NOTIFICATION_ICONS, BORD_ONE_TONE_ICONS, BORD_TWO_TONE_ICONS, BordAttentionButton, BordAvatar, BordBackButton, BordBadge, BordButton, BordEmptyState, BordFilters, BordFlag, BordFloatDropdown, BordGenericSelect, BordIlustrationIcon, BordInfoBanner, BordInfoCard, BordMetricCard, BordMetricCards, BordModal, BordOneToneIcon, BordSearchBar, BordSelect, BordSortSelect, BordSwitch, BordTab, BordTabBar, BordTabs, BordTabsGroupWithBadge, BordTextInput, BordToast, BordTooltip, BordTwoToneIcon, BordUploaderButton, COUNTRY_CODES, FORM_COMPONENTS_STANDARD_SIZES, ModalContent, ThemeProvider };
|
|
7789
|
+
export { BORD_AVATARS, BORD_ILUSTRATION_ICONS, BORD_NOTIFICATION_ICONS, BORD_ONE_TONE_ICONS, BORD_TWO_TONE_ICONS, BordActionButton, BordAttentionButton, BordAvatar, BordBackButton, BordBadge, BordBreadCrumb, BordButton, BordCellCard, BordCheckBox, BordDatePicker, BordDropdown, BordEmptyState, BordFeedbackAlert, BordFilters, BordFiltersExpandableSelect, BordFlag, BordFloatDropdown, BordGenericSelect, BordGlass, BordIlustrationIcon, BordInfoBanner, BordInfoCard, BordLogo, BordMarketplaceButton, BordMentions, BordMetricCard, BordMetricCards, BordModal, BordNotificationIcon, BordOneToneIcon, BordPasswordInput, BordPhoto, BordProfileSummary, BordRadioButton, BordScrollBar, BordSearchBar, BordSelect, BordSidebar, BordSidebarButton, BordSidebarWithFilters, BordSortSelect, BordStatus, BordStepper, BordSwitch, BordTab, BordTabBar, BordTabs, BordTabsGroupWithBadge, BordTag, BordTags, BordTextArea, BordTextButton, BordTextInput, BordToast, BordToolModelMarker, BordToolsPhotos, BordTooltip, BordTrelloRowFooterBadgeList, BordTwoToneIcon, BordUploaderButton, COUNTRY_CODES, FORM_COMPONENTS_STANDARD_SIZES, ModalContent, ThemeProvider };
|
|
6907
7790
|
//# sourceMappingURL=index.esm.js.map
|