contentoh-components-library 21.6.61 → 21.6.62

package/dist/components/organisms/ServicesNavigation/ServicesRail.js

@@ -1,705 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ServicesRail = exports.RAIL_WIDTH = exports.RAIL_COLLAPSED_WIDTH = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = require("react");
-
-var _material = require("@mui/material");
-
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-
-var _MenuOpen = _interopRequireDefault(require("@mui/icons-material/MenuOpen"));
-
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-
-var _ui = require("./ui");
-
-var _model = require("./model");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-/*
-  Lista lateral de servicios: reemplaza a la barra de pestañas.
-
-  - Solo muestra los servicios que el producto tiene contratados.
-  - «Resumen» va primero: el panorama de todos los servicios.
-  - Los servicios van en bloques fijos (Textos, Imágenes...). No se reordenan
-    por estatus: cada uno queda siempre en el mismo lugar.
-  - «Míos / Todos»: por omisión, solo lo que la persona trabaja. Aparece solo
-    cuando sirve (trabaja algunos servicios del producto, no todos).
-  - El buscador aparece cuando hay más de 8 servicios a la vista.
-  - Se contrae a una columna de íconos para dejarle el ancho al editor.
-  - `side`: de qué lado de la pantalla va («left» o «right»). Del lado derecho
-    es el espejo del izquierdo: borde, marca del servicio abierto, flechas de
-    contraer y globos de ayuda cambian de lado.
-*/
-var RAIL_WIDTH = 256;
-exports.RAIL_WIDTH = RAIL_WIDTH;
-var RAIL_COLLAPSED_WIDTH = 64;
-exports.RAIL_COLLAPSED_WIDTH = RAIL_COLLAPSED_WIDTH;
-var SEARCH_THRESHOLD = 8;
-var EXPAND_ALL_THRESHOLD = 12;
-
-var CountBadge = function CountBadge(_ref) {
-  var children = _ref.children,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    component: "span",
-    sx: {
-      minWidth: 20,
-      height: 18,
-      px: 0.75,
-      borderRadius: "9px",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontFamily: _ui.FONT_STACK,
-      fontSize: 11,
-      fontWeight: 700,
-      bgcolor: active ? _ui.COLORS.s5 : _ui.COLORS.s2,
-      color: active ? _ui.COLORS.white : _ui.COLORS.s4
-    },
-    children: children
-  });
-};
-
-var FilterToggle = function FilterToggle(_ref2) {
-  var value = _ref2.value,
-      onChange = _ref2.onChange,
-      mineCount = _ref2.mineCount,
-      allCount = _ref2.allCount;
-  var options = [{
-    key: "mine",
-    label: "Míos",
-    count: mineCount
-  }, {
-    key: "all",
-    label: "Todos",
-    count: allCount
-  }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    role: "group",
-    "aria-label": "Qu\xE9 servicios ver",
-    sx: {
-      display: "flex",
-      p: "3px",
-      mx: 2,
-      mb: 1.5,
-      bgcolor: _ui.COLORS.s2,
-      borderRadius: "18px"
-    },
-    children: options.map(function (option) {
-      var active = option.key === value;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-        "aria-pressed": active,
-        onClick: function onClick() {
-          return onChange(option.key);
-        },
-        sx: {
-          flex: 1,
-          height: 28,
-          gap: 0.75,
-          borderRadius: "15px",
-          fontFamily: _ui.FONT_STACK,
-          fontSize: 13,
-          fontWeight: active ? 700 : 400,
-          color: active ? _ui.COLORS.s5 : _ui.COLORS.s4,
-          bgcolor: active ? _ui.COLORS.white : "transparent",
-          boxShadow: active ? "0 1px 3px rgba(80, 61, 102, 0.18)" : "none",
-          transition: "background-color 120ms, box-shadow 120ms"
-        },
-        children: [option.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
-          active: active,
-          children: option.count
-        })]
-      }, option.key);
-    })
-  });
-};
-
-var itemSx = function itemSx(active) {
-  var _before;
-
-  var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "left";
-  return {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    gap: 1.25,
-    height: 36,
-    pl: 1.5,
-    pr: 1,
-    borderRadius: "8px",
-    position: "relative",
-    textAlign: "left",
-    bgcolor: active ? _ui.COLORS.s2 : "transparent",
-    "&:hover": {
-      bgcolor: _ui.COLORS.s2
-    },
-    "&::before": (_before = {
-      content: '""',
-      position: "absolute"
-    }, (0, _defineProperty2.default)(_before, side, 0), (0, _defineProperty2.default)(_before, "top", 8), (0, _defineProperty2.default)(_before, "bottom", 8), (0, _defineProperty2.default)(_before, "width", 3), (0, _defineProperty2.default)(_before, "borderRadius", "2px"), (0, _defineProperty2.default)(_before, "bgcolor", active ? _ui.COLORS.magenta_s2 : "transparent"), _before)
-  };
-};
-
-var ItemLabel = function ItemLabel(_ref3) {
-  var active = _ref3.active,
-      children = _ref3.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-    sx: {
-      flex: 1,
-      minWidth: 0,
-      fontFamily: _ui.FONT_STACK,
-      fontSize: 14,
-      fontWeight: active ? 700 : 400,
-      color: active ? _ui.COLORS.s5 : _ui.COLORS.color_gray,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    children: children
-  });
-};
-/* ------------------------------------------------------------------------ */
-
-/* Lista completa                                                           */
-
-/* ------------------------------------------------------------------------ */
-
-
-var ExpandedRail = function ExpandedRail(_ref4) {
-  var _services$find;
-
-  var services = _ref4.services,
-      visible = _ref4.visible,
-      selected = _ref4.selected,
-      onSelect = _ref4.onSelect,
-      userId = _ref4.userId,
-      filter = _ref4.filter,
-      onFilterChange = _ref4.onFilterChange,
-      showFilter = _ref4.showFilter,
-      onCollapse = _ref4.onCollapse,
-      onClose = _ref4.onClose,
-      side = _ref4.side;
-
-  var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      query = _useState2[0],
-      setQuery = _useState2[1];
-
-  var text = query.trim().toLowerCase();
-  var matches = text ? visible.filter(function (service) {
-    return service.display_name.toLowerCase().includes(text);
-  }) : visible;
-  var groups = (0, _model.groupServices)(matches);
-  var pendingCount = services.filter(function (service) {
-    return (0, _model.isPendingFor)(service, userId);
-  }).length;
-  /*
-    Bloques abiertos: todos si caben; si no, el del servicio abierto y los que
-    tienen algo que le toca a la persona. Al buscar se abren todos.
-  */
-  // `visible` es un arreglo nuevo en cada render: se compara por sus nombres.
-
-  var visibleKey = visible.map(function (service) {
-    return service.service_name;
-  }).join(",");
-  var defaultOpen = (0, _react.useMemo)(function () {
-    var all = (0, _model.groupServices)(visible);
-    if (visible.length <= EXPAND_ALL_THRESHOLD) return all.map(function (group) {
-      return group.key;
-    });
-    return all.filter(function (group) {
-      return group.services.some(function (service) {
-        return service.service_name === selected || (0, _model.isPendingFor)(service, userId);
-      });
-    }).map(function (group) {
-      return group.key;
-    }); // Solo al cambiar lo que se ve: abrir un servicio no vuelve a cerrar bloques.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visibleKey, userId]);
-
-  var _useState3 = (0, _react.useState)(defaultOpen),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    return setOpen(defaultOpen);
-  }, [defaultOpen]); // Si se abre un servicio de un bloque cerrado (desde el Resumen), se abre.
-
-  var selectedGroup = (_services$find = services.find(function (service) {
-    return service.service_name === selected;
-  })) === null || _services$find === void 0 ? void 0 : _services$find.group;
-  (0, _react.useEffect)(function () {
-    if (selectedGroup) setOpen(function (prev) {
-      return prev.includes(selectedGroup) ? prev : [].concat((0, _toConsumableArray2.default)(prev), [selectedGroup]);
-    });
-  }, [selectedGroup]);
-
-  var toggle = function toggle(key) {
-    return setOpen(function (prev) {
-      return prev.includes(key) ? prev.filter(function (item) {
-        return item !== key;
-      }) : [].concat((0, _toConsumableArray2.default)(prev), [key]);
-    });
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        px: 2,
-        pt: 2,
-        pb: 1.5
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: {
-          flex: 1,
-          fontFamily: _ui.TITLE_STACK,
-          fontWeight: 600,
-          fontSize: 16,
-          color: _ui.COLORS.s5
-        },
-        children: "Servicios"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
-        children: services.length
-      }), onCollapse && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-        title: "Contraer la lista",
-        arrow: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-          "aria-label": "Contraer la lista de servicios",
-          size: "small",
-          onClick: onCollapse,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOpen.default, {
-            sx: {
-              fontSize: 20,
-              color: _ui.COLORS.s4,
-              transform: side === "right" ? "scaleX(-1)" : "none"
-            }
-          })
-        })
-      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-        "aria-label": "Cerrar la lista de servicios",
-        size: "small",
-        onClick: onClose,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
-          sx: {
-            fontSize: 20,
-            color: _ui.COLORS.s4
-          }
-        })
-      })]
-    }), showFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterToggle, {
-      value: filter,
-      onChange: onFilterChange,
-      mineCount: services.filter(function (service) {
-        return (0, _model.isMine)(service, userId);
-      }).length,
-      allCount: services.length
-    }), visible.length > SEARCH_THRESHOLD && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        px: 2,
-        mb: 1
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-        size: "small",
-        fullWidth: true,
-        placeholder: "Buscar servicio\u2026",
-        value: query,
-        onChange: function onChange(event) {
-          return setQuery(event.target.value);
-        },
-        sx: _ui.fieldSx,
-        InputProps: {
-          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
-              sx: {
-                fontSize: 18,
-                color: _ui.COLORS.s4
-              }
-            })
-          })
-        }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: "auto",
-        px: 1,
-        pb: 1
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-        onClick: function onClick() {
-          return onSelect(_model.SUMMARY);
-        },
-        "aria-current": selected === _model.SUMMARY ? "true" : undefined,
-        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemSx(selected === _model.SUMMARY, side)), {}, {
-          mb: 0.5
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
-          icon: "summary",
-          sx: {
-            color: selected === _model.SUMMARY ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemLabel, {
-          active: selected === _model.SUMMARY,
-          children: "Resumen"
-        }), pendingCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
-          children: pendingCount
-        })]
-      }), groups.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: {
-          py: 3,
-          textAlign: "center",
-          fontFamily: _ui.FONT_STACK,
-          fontSize: 13,
-          color: _ui.COLORS.s4
-        },
-        children: "Sin coincidencias"
-      }), groups.map(function (group) {
-        var isOpen = Boolean(text) || open.includes(group.key);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            mt: 0.5
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-            onClick: function onClick() {
-              return toggle(group.key);
-            },
-            "aria-expanded": isOpen,
-            sx: {
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              px: 1.5,
-              py: 0.75,
-              borderRadius: "6px",
-              "&:hover": {
-                bgcolor: _ui.COLORS.s1
-              }
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                flex: 1,
-                textAlign: "left",
-                fontFamily: _ui.FONT_STACK,
-                fontSize: 11,
-                fontWeight: 700,
-                letterSpacing: "0.06em",
-                textTransform: "uppercase",
-                color: _ui.COLORS.s4
-              },
-              children: group.label
-            }), group.services.some(function (service) {
-              return (0, _model.isPendingFor)(service, userId);
-            }) && !isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {
-              size: 6,
-              withTooltip: false
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                fontFamily: _ui.FONT_STACK,
-                fontSize: 11,
-                fontWeight: 700,
-                color: _ui.COLORS.s4
-              },
-              children: group.services.length
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
-              sx: {
-                fontSize: 18,
-                color: _ui.COLORS.s4,
-                transition: "transform 150ms",
-                transform: isOpen ? "rotate(180deg)" : "none"
-              }
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
-            in: isOpen,
-            children: group.services.map(function (service) {
-              var active = service.service_name === selected;
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-                onClick: function onClick() {
-                  return onSelect(service.service_name);
-                },
-                "aria-current": active ? "true" : undefined,
-                sx: itemSx(active, side),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
-                  icon: service.icon,
-                  sx: {
-                    color: active ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
-                  }
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemLabel, {
-                  active: active,
-                  children: service.display_name
-                }), (0, _model.isPendingFor)(service, userId) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.StatusChip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _ui.serviceStatusProps)(service)), {}, {
-                  oval: true
-                }))]
-              }, service.service_name);
-            })
-          })]
-        }, group.key);
-      })]
-    }), pendingCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        px: 2,
-        py: 1.25,
-        borderTop: "1px solid ".concat(_ui.COLORS.s2)
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {
-        withTooltip: false
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-        sx: {
-          fontFamily: _ui.FONT_STACK,
-          fontSize: 12,
-          color: _ui.COLORS.s4
-        },
-        children: ["Te toca a ti \xB7 ", pendingCount, " ", pendingCount === 1 ? "servicio" : "servicios"]
-      })]
-    })]
-  });
-};
-/* ------------------------------------------------------------------------ */
-
-/* Lista contraída: solo íconos                                             */
-
-/* ------------------------------------------------------------------------ */
-
-
-var CollapsedRail = function CollapsedRail(_ref5) {
-  var visible = _ref5.visible,
-      selected = _ref5.selected,
-      onSelect = _ref5.onSelect,
-      userId = _ref5.userId,
-      onExpand = _ref5.onExpand,
-      side = _ref5.side;
-  var groups = (0, _model.groupServices)(visible); // Los globos de ayuda salen hacia el editor, no hacia el borde de la pantalla.
-
-  var tooltipPlacement = side === "right" ? "left" : "right";
-
-  var iconButtonSx = function iconButtonSx(active) {
-    var _before2;
-
-    return {
-      width: 44,
-      height: 40,
-      borderRadius: "8px",
-      position: "relative",
-      bgcolor: active ? _ui.COLORS.s2 : "transparent",
-      "&:hover": {
-        bgcolor: _ui.COLORS.s2
-      },
-      "&::before": (_before2 = {
-        content: '""',
-        position: "absolute"
-      }, (0, _defineProperty2.default)(_before2, side, -10), (0, _defineProperty2.default)(_before2, "top", 8), (0, _defineProperty2.default)(_before2, "bottom", 8), (0, _defineProperty2.default)(_before2, "width", 3), (0, _defineProperty2.default)(_before2, "borderRadius", "2px"), (0, _defineProperty2.default)(_before2, "bgcolor", active ? _ui.COLORS.magenta_s2 : "transparent"), _before2)
-    };
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        pt: 1.5,
-        pb: 1
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-        title: "Mostrar la lista de servicios",
-        arrow: true,
-        placement: tooltipPlacement,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-          "aria-label": "Mostrar la lista de servicios",
-          onClick: onExpand,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOpen.default, {
-            sx: {
-              fontSize: 22,
-              color: _ui.COLORS.s4,
-              transform: side === "right" ? "none" : "scaleX(-1)"
-            }
-          })
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: "auto",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 0.5,
-        pb: 1
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-        title: "Resumen",
-        arrow: true,
-        placement: tooltipPlacement,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
-          "aria-label": "Resumen",
-          "aria-current": selected === _model.SUMMARY ? "true" : undefined,
-          onClick: function onClick() {
-            return onSelect(_model.SUMMARY);
-          },
-          sx: iconButtonSx(selected === _model.SUMMARY),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
-            icon: "summary",
-            sx: {
-              fontSize: 22,
-              color: selected === _model.SUMMARY ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
-            }
-          })
-        })
-      }), groups.map(function (group) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 0.5,
-            pt: 0.75,
-            mt: 0.25,
-            borderTop: "1px solid ".concat(_ui.COLORS.s2),
-            width: 40
-          },
-          children: group.services.map(function (service) {
-            var _statusName;
-
-            var active = service.service_name === selected;
-            var pending = (0, _model.isPendingFor)(service, userId);
-            var label = [service.display_name, (_statusName = (0, _ui.statusName)(service.status)) !== null && _statusName !== void 0 ? _statusName : service.status, pending ? "Te toca a ti" : null].filter(Boolean).join(" · ");
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: label,
-              arrow: true,
-              placement: tooltipPlacement,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-                "aria-label": label,
-                "aria-current": active ? "true" : undefined,
-                onClick: function onClick() {
-                  return onSelect(service.service_name);
-                },
-                sx: iconButtonSx(active),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
-                  icon: service.icon,
-                  sx: {
-                    fontSize: 22,
-                    color: active ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
-                  }
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                  component: "span",
-                  sx: {
-                    position: "absolute",
-                    top: 5,
-                    right: 6,
-                    width: 9,
-                    height: 9,
-                    borderRadius: "50%",
-                    bgcolor: (0, _ui.serviceStatusColor)(service),
-                    border: "2px solid ".concat(active ? _ui.COLORS.s2 : _ui.COLORS.white)
-                  }
-                }), pending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                  component: "span",
-                  sx: {
-                    position: "absolute",
-                    bottom: 4,
-                    left: "50%",
-                    transform: "translateX(-50%)",
-                    width: 14,
-                    height: 3,
-                    borderRadius: "2px",
-                    bgcolor: _ui.COLORS.magenta_s2
-                  }
-                })]
-              })
-            }, service.service_name);
-          })
-        }, group.key);
-      })]
-    })]
-  });
-};
-/* ------------------------------------------------------------------------ */
-
-
-var ServicesRail = function ServicesRail(_ref6) {
-  var _ref7;
-
-  var services = _ref6.services,
-      selected = _ref6.selected,
-      onSelect = _ref6.onSelect,
-      userId = _ref6.userId,
-      filter = _ref6.filter,
-      onFilterChange = _ref6.onFilterChange,
-      showFilter = _ref6.showFilter,
-      _ref6$collapsed = _ref6.collapsed,
-      collapsed = _ref6$collapsed === void 0 ? false : _ref6$collapsed,
-      onToggleCollapsed = _ref6.onToggleCollapsed,
-      onClose = _ref6.onClose,
-      _ref6$variant = _ref6.variant,
-      variant = _ref6$variant === void 0 ? "rail" : _ref6$variant,
-      _ref6$side = _ref6.side,
-      side = _ref6$side === void 0 ? "left" : _ref6$side;
-  var visible = showFilter && filter === "mine" ? services.filter(function (service) {
-    return (0, _model.isMine)(service, userId) || service.service_name === selected;
-  }) : services;
-  var isRail = variant === "rail";
-  var width = isRail ? collapsed ? RAIL_COLLAPSED_WIDTH : RAIL_WIDTH : "100%";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    component: "nav",
-    "aria-label": "Servicios del producto",
-    sx: (_ref7 = {
-      width: width,
-      flexShrink: 0,
-      height: "100%",
-      minHeight: 0,
-      display: "flex",
-      flexDirection: "column",
-      bgcolor: _ui.COLORS.white
-    }, (0, _defineProperty2.default)(_ref7, side === "right" ? "borderLeft" : "borderRight", isRail ? "1px solid ".concat(_ui.COLORS.s2) : "none"), (0, _defineProperty2.default)(_ref7, "transition", "width 160ms ease"), (0, _defineProperty2.default)(_ref7, "overflow", "hidden"), (0, _defineProperty2.default)(_ref7, "fontFamily", _ui.FONT_STACK), _ref7),
-    children: isRail && collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsedRail, {
-      visible: visible,
-      selected: selected,
-      onSelect: onSelect,
-      userId: userId,
-      onExpand: onToggleCollapsed,
-      side: side
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandedRail, {
-      services: services,
-      visible: visible,
-      selected: selected,
-      onSelect: onSelect,
-      userId: userId,
-      filter: filter,
-      onFilterChange: onFilterChange,
-      showFilter: showFilter,
-      onCollapse: isRail ? onToggleCollapsed : undefined,
-      onClose: onClose,
-      side: side
-    })
-  });
-};
-
-exports.ServicesRail = ServicesRail;