bord-design-system 0.0.25 → 0.0.26

package/dist/components/BordIncidentDatesForm/BordIncidentDatesForm.d.ts

@@ -5,6 +5,6 @@ import './BordIncidentDatesForm.scss';
  * proveedor de un incidente. Si se pasan slaStartDate y slaEndDate, muestra
  * un banner informativo con el rango del SLA en la parte superior.
  */
-declare const BordIncidentDatesForm: ({ value, onChange, slaStartDate, slaEndDate, pickupFromLabel, pickupToLabel, deliveryFromLabel, deliveryToLabel, trackingLinkLabel, trackingLinkPlaceholder, trackingCodeLabel, trackingCodePlaceholder, providerLabel, providerPlaceholder, slaBannerLabel, className, }: IBordIncidentDatesForm) => import("react/jsx-runtime").JSX.Element;
+declare const BordIncidentDatesForm: ({ value, onChange, slaStartDate, slaEndDate, pickupFromLabel, pickupToLabel, deliveryFromLabel, deliveryToLabel, trackingLinkLabel, trackingLinkPlaceholder, trackingCodeLabel, trackingCodePlaceholder, providerLabel, providerPlaceholder, slaBannerLabel, className, showPickupDates, showDeliveryDates, showProviderField, }: IBordIncidentDatesForm) => import("react/jsx-runtime").JSX.Element;
 export default BordIncidentDatesForm;
 //# sourceMappingURL=BordIncidentDatesForm.d.ts.map

package/dist/components/BordIncidentDatesForm/BordIncidentDatesForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BordIncidentDatesForm.d.ts","sourceRoot":"","sources":["../../../src/components/BordIncidentDatesForm/BordIncidentDatesForm.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAA2B,MAAM,+BAA+B,CAAC;AACrG,OAAO,8BAA8B,CAAC;AAetC;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,8QAiBxB,sBAAsB,4CAqExB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"BordIncidentDatesForm.d.ts","sourceRoot":"","sources":["../../../src/components/BordIncidentDatesForm/BordIncidentDatesForm.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAA2B,MAAM,+BAA+B,CAAC;AACrG,OAAO,8BAA8B,CAAC;AAetC;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,qUAoBxB,sBAAsB,4CAiFxB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/BordIncidentDatesForm/BordIncidentDatesForm.types.d.ts

@@ -24,5 +24,8 @@ export interface IBordIncidentDatesForm {
     providerPlaceholder?: string;
     slaBannerLabel?: string;
     className?: string;
+    showPickupDates?: boolean;
+    showDeliveryDates?: boolean;
+    showProviderField?: boolean;
 }
 //# sourceMappingURL=BordIncidentDatesForm.types.d.ts.map

package/dist/components/BordIncidentDatesForm/BordIncidentDatesForm.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BordIncidentDatesForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordIncidentDatesForm/BordIncidentDatesForm.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,uBAAuB,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"BordIncidentDatesForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordIncidentDatesForm/BordIncidentDatesForm.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,uBAAuB,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/dist/index.d.ts

@@ -2198,6 +2198,9 @@ interface IBordIncidentDatesForm {
     providerPlaceholder?: string;
     slaBannerLabel?: string;
     className?: string;
+    showPickupDates?: boolean;
+    showDeliveryDates?: boolean;
+    showProviderField?: boolean;
 }
 
 /**
@@ -2205,7 +2208,7 @@ interface IBordIncidentDatesForm {
  * proveedor de un incidente. Si se pasan slaStartDate y slaEndDate, muestra
  * un banner informativo con el rango del SLA en la parte superior.
  */
-declare const BordIncidentDatesForm: ({ value, onChange, slaStartDate, slaEndDate, pickupFromLabel, pickupToLabel, deliveryFromLabel, deliveryToLabel, trackingLinkLabel, trackingLinkPlaceholder, trackingCodeLabel, trackingCodePlaceholder, providerLabel, providerPlaceholder, slaBannerLabel, className, }: IBordIncidentDatesForm) => react_jsx_runtime.JSX.Element;
+declare const BordIncidentDatesForm: ({ value, onChange, slaStartDate, slaEndDate, pickupFromLabel, pickupToLabel, deliveryFromLabel, deliveryToLabel, trackingLinkLabel, trackingLinkPlaceholder, trackingCodeLabel, trackingCodePlaceholder, providerLabel, providerPlaceholder, slaBannerLabel, className, showPickupDates, showDeliveryDates, showProviderField, }: IBordIncidentDatesForm) => react_jsx_runtime.JSX.Element;
 
 interface IBordClosableIncident {
     uid: string;

package/dist/index.esm.js

@@ -11350,7 +11350,7 @@ const formatDateToPicker = (dateValueIsoFormat, utcTimeOffset) => {
     return formattedDate;
 };
 
-var css_248z$O = ".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)}";
+var css_248z$O = ".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(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath stroke='%23C6C7CB' stroke-linecap='round' stroke-linejoin='round' d='M1.75 5.834h10.5M9.333 1.167V3.5M4.667 1.167V3.5m-1.75-1.166h8.166c.645 0 1.167.522 1.167 1.166v8.167c0 .644-.522 1.167-1.167 1.167H2.917a1.167 1.167 0 0 1-1.167-1.167V3.5c0-.644.522-1.166 1.167-1.166Z'/%3E%3C/svg%3E\")}.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(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath stroke='%23C6C7CB' stroke-linecap='round' stroke-linejoin='round' d='M1.75 5.834h10.5M9.333 1.167V3.5M4.667 1.167V3.5m-1.75-1.166h8.166c.645 0 1.167.522 1.167 1.166v8.167c0 .644-.522 1.167-1.167 1.167H2.917a1.167 1.167 0 0 1-1.167-1.167V3.5c0-.644.522-1.166 1.167-1.166Z'/%3E%3C/svg%3E\")}.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(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath stroke='%23FC543D' stroke-linecap='round' stroke-linejoin='round' d='M1.75 5.834h10.5M9.333 1.167V3.5M4.667 1.167V3.5m-1.75-1.166h8.166c.645 0 1.167.522 1.167 1.166v8.167c0 .644-.522 1.167-1.167 1.167H2.917a1.167 1.167 0 0 1-1.167-1.167V3.5c0-.644.522-1.166 1.167-1.166Z'/%3E%3C/svg%3E\")}.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(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath stroke='%23C6C7CB' stroke-linecap='round' stroke-linejoin='round' d='M1.75 5.834h10.5M9.333 1.167V3.5M4.667 1.167V3.5m-1.75-1.166h8.166c.645 0 1.167.522 1.167 1.166v8.167c0 .644-.522 1.167-1.167 1.167H2.917a1.167 1.167 0 0 1-1.167-1.167V3.5c0-.644.522-1.166 1.167-1.166Z'/%3E%3C/svg%3E\")}";
 styleInject(css_248z$O);
 
 const BordDatePicker = ({ updateCurrentValueCallback, isFilled, defaultValue, desiredTimeZone, label, errorText, isDisabled, hideErrorText, debounceTime, handleFocus, customWidth = "100%", }) => {
@@ -43163,24 +43163,34 @@ const SLA_BANNER_ICON_SIZE = 14;
  * proveedor de un incidente. Si se pasan slaStartDate y slaEndDate, muestra
  * un banner informativo con el rango del SLA en la parte superior.
  */
-const BordIncidentDatesForm = ({ value, onChange, slaStartDate, slaEndDate, pickupFromLabel = DEFAULT_PICKUP_FROM, pickupToLabel = DEFAULT_PICKUP_TO, deliveryFromLabel = DEFAULT_DELIVERY_FROM, deliveryToLabel = DEFAULT_DELIVERY_TO, trackingLinkLabel = DEFAULT_TRACKING_LINK_LABEL, trackingLinkPlaceholder = DEFAULT_TRACKING_LINK_PH, trackingCodeLabel = DEFAULT_TRACKING_CODE_LABEL, trackingCodePlaceholder = DEFAULT_TRACKING_CODE_PH, providerLabel = DEFAULT_PROVIDER_LABEL, providerPlaceholder = DEFAULT_PROVIDER_PH, slaBannerLabel = DEFAULT_SLA_BANNER_LABEL, className = '', }) => {
+const BordIncidentDatesForm = ({ value, onChange, slaStartDate, slaEndDate, pickupFromLabel = DEFAULT_PICKUP_FROM, pickupToLabel = DEFAULT_PICKUP_TO, deliveryFromLabel = DEFAULT_DELIVERY_FROM, deliveryToLabel = DEFAULT_DELIVERY_TO, trackingLinkLabel = DEFAULT_TRACKING_LINK_LABEL, trackingLinkPlaceholder = DEFAULT_TRACKING_LINK_PH, trackingCodeLabel = DEFAULT_TRACKING_CODE_LABEL, trackingCodePlaceholder = DEFAULT_TRACKING_CODE_PH, providerLabel = DEFAULT_PROVIDER_LABEL, providerPlaceholder = DEFAULT_PROVIDER_PH, slaBannerLabel = DEFAULT_SLA_BANNER_LABEL, className = '', showPickupDates = true, showDeliveryDates = true, showProviderField = true, }) => {
     const update = (field, next) => {
         onChange({ ...value, [field]: next });
     };
     const slaRange = slaStartDate && slaEndDate ? `${slaStartDate} a ${slaEndDate}` : undefined;
     const dateFields = [
-        { key: 'pickupDateFrom', label: pickupFromLabel },
-        { key: 'pickupDateTo', label: pickupToLabel },
-        { key: 'deliveryDateFrom', label: deliveryFromLabel },
-        { key: 'deliveryDateTo', label: deliveryToLabel },
+        ...(showPickupDates
+            ? [
+                { key: 'pickupDateFrom', label: pickupFromLabel },
+                { key: 'pickupDateTo', label: pickupToLabel },
+            ]
+            : []),
+        ...(showDeliveryDates
+            ? [
+                { key: 'deliveryDateFrom', label: deliveryFromLabel },
+                { key: 'deliveryDateTo', label: deliveryToLabel },
+            ]
+            : []),
     ];
     const trackingFields = [
         { key: 'trackingLink', label: trackingLinkLabel, placeholder: trackingLinkPlaceholder },
         { key: 'trackingCode', label: trackingCodeLabel, placeholder: trackingCodePlaceholder },
-        { key: 'providerName', label: providerLabel, placeholder: providerPlaceholder },
+        ...(showProviderField
+            ? [{ key: 'providerName', label: providerLabel, placeholder: providerPlaceholder }]
+            : []),
     ];
     const rootClassName = ['bordIncidentDatesFormDS', className].filter(Boolean).join(' ');
-    return (jsxs("div", { className: rootClassName, children: [slaRange && (jsxs("div", { className: "bordIncidentDatesFormDSslaBanner", children: [jsx("span", { className: "bordIncidentDatesFormDSslaBannerIcon", "aria-hidden": true, children: jsx(BordOneToneIcon, { variant: "info", standardSize: SLA_BANNER_ICON_SIZE, className: "bordIncidentDatesFormDSslaBannerIconSvg" }) }), jsx("span", { className: "bordIncidentDatesFormDSslaBannerLabel", children: slaBannerLabel }), jsx("span", { className: "bordIncidentDatesFormDSslaBannerRange", children: slaRange })] })), jsx("div", { className: "bordIncidentDatesFormDSdates", children: dateFields.map(({ key, label }) => (jsx("div", { className: "bordIncidentDatesFormDSdateField", children: jsx(BordDatePicker, { label: label, isFilled: Boolean(value[key]), defaultValue: value[key], updateCurrentValueCallback: (v) => update(key, v) }) }, key))) }), trackingFields.map(({ key, label, placeholder }) => (jsx("div", { className: "bordIncidentDatesFormDStrackingField", children: jsx(BordTextInput, { label: label, placeholder: placeholder, currentText: value[key] ?? '', isFilled: Boolean(value[key]), setCurrentText: (v) => update(key, v), hideErrorText: true }) }, key)))] }));
+    return (jsxs("div", { className: rootClassName, children: [slaRange && (jsxs("div", { className: "bordIncidentDatesFormDSslaBanner", children: [jsx("span", { className: "bordIncidentDatesFormDSslaBannerIcon", "aria-hidden": true, children: jsx(BordOneToneIcon, { variant: "info", standardSize: SLA_BANNER_ICON_SIZE, className: "bordIncidentDatesFormDSslaBannerIconSvg" }) }), jsx("span", { className: "bordIncidentDatesFormDSslaBannerLabel", children: slaBannerLabel }), jsx("span", { className: "bordIncidentDatesFormDSslaBannerRange", children: slaRange })] })), dateFields.length > 0 && (jsx("div", { className: "bordIncidentDatesFormDSdates", children: dateFields.map(({ key, label }) => (jsx("div", { className: "bordIncidentDatesFormDSdateField", children: jsx(BordDatePicker, { label: label, isFilled: Boolean(value[key]), defaultValue: value[key], updateCurrentValueCallback: (v) => update(key, v) }) }, key))) })), trackingFields.map(({ key, label, placeholder }) => (jsx("div", { className: "bordIncidentDatesFormDStrackingField", children: jsx(BordTextInput, { label: label, placeholder: placeholder, currentText: value[key] ?? '', isFilled: Boolean(value[key]), setCurrentText: (v) => update(key, v), hideErrorText: true }) }, key)))] }));
 };
 
 var css_248z$5 = ".bordIncidentClosureListDS{display:block;width:100%}.bordIncidentClosureListDS .bordIncidentClosureListDSselectAll{display:flex;justify-content:flex-end;margin-bottom:1.2rem}.bordIncidentClosureListDS .bordIncidentClosureListDSsearch{align-items:center;background-color:var(--ds-c-layout-l1);border-color:var(--ds-c-stroke-default);border-radius:.6rem;border-style:solid;border-width:1px;cursor:text;display:flex;gap:.8rem;height:4rem;margin-bottom:1.6rem;padding-left:1.2rem;padding-right:1.2rem;position:relative}.bordIncidentClosureListDS .bordIncidentClosureListDSsearch:focus-within{border-color:var(--ds-c-primary-bg-default)}.bordIncidentClosureListDS .bordIncidentClosureListDSsearchIcon{align-items:center;color:var(--ds-c-content-secondary);display:flex;flex-shrink:0;justify-content:center}.bordIncidentClosureListDS .bordIncidentClosureListDSsearchInput{background-color:transparent;border-style:none;color:var(--ds-c-content-default);flex:1 1 0%;font-size:1.2rem;line-height:1.5rem;outline:2px solid transparent;outline-offset:2px}.bordIncidentClosureListDS .bordIncidentClosureListDSsearchInput::-moz-placeholder{color:var(--ds-c-content-secondary)}.bordIncidentClosureListDS .bordIncidentClosureListDSsearchInput::placeholder{color:var(--ds-c-content-secondary)}.bordIncidentClosureListDS .bordIncidentClosureListDSlist{display:flex;flex-direction:column;gap:.8rem;list-style-type:none;margin:0;padding:0}.bordIncidentClosureListDS .bordIncidentClosureListDSitem{--tw-bg-opacity:1;align-items:flex-start;background-color:rgb(250 250 249/var(--tw-bg-opacity));border-color:var(--ds-c-stroke-default);border-radius:.6rem;border-style:solid;border-width:1px;display:flex;gap:1.2rem;padding:1.2rem;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordIncidentClosureListDS .bordIncidentClosureListDSitem:hover{background-color:var(--ds-c-primary-bg-secondary)}.bordIncidentClosureListDS .bordIncidentClosureListDSitem.selected{background-color:var(--ds-c-primary-bg-secondary);border-color:var(--ds-c-primary-bg-default)}.bordIncidentClosureListDS .bordIncidentClosureListDSitemCheckbox{flex-shrink:0;margin-top:.2rem}.bordIncidentClosureListDS .bordCheckBoxButtonSvg svg .largeRect,.bordIncidentClosureListDS .bordCheckBoxButtonSvg svg .smallRect{stroke-width:1.6}.bordIncidentClosureListDS .bordIncidentClosureListDSitemContent{flex:1 1 0%;min-width:0}.bordIncidentClosureListDS .bordIncidentClosureListDSitemDate{color:var(--ds-c-content-secondary);display:block;font-size:1rem;line-height:1.3rem;margin-bottom:.4rem}.bordIncidentClosureListDS .bordIncidentClosureListDSitemMessage{color:var(--ds-c-content-secondary);display:block;font-size:1.2rem;line-height:1.5rem}.bordIncidentClosureListDS .bordIncidentClosureListDSitemMessage strong{font-weight:700}.bordIncidentClosureListDS .bordIncidentClosureListDSemptyState{color:var(--ds-c-content-secondary);display:block;font-size:1.2rem;line-height:1.5rem;padding:2.4rem 1.6rem;text-align:center}";