@widergy/energy-ui 3.138.5 → 3.139.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.139.0](https://github.com/widergy/energy-ui/compare/v3.138.5...v3.139.0) (2026-02-25)
+
+
+### Features
+
+* [AXCH-1193] ut panel component refactor ([#753](https://github.com/widergy/energy-ui/issues/753)) ([e30c16a](https://github.com/widergy/energy-ui/commit/e30c16a09d6e4e27be50161be797fb6c962aa81f))
+
 ## [3.138.5](https://github.com/widergy/energy-ui/compare/v3.138.4...v3.138.5) (2026-02-24)
 
 

package/dist/components/UTPanel/UTPanel.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
+exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithAdditionalContent = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -61,6 +61,95 @@ const headerItemsExample = [{
   icon: 'IconUser',
   value: 'Juan Pérez'
 }];
+
+// Mock components for AdditionalContent
+const SettingsBodyComponent = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "title3",
+  weight: "medium",
+  style: {
+    marginBottom: '12px'
+  }
+}, "Configuraci\xF3n"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Ajusta los par\xE1metros de la aplicaci\xF3n desde aqu\xED."), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Tema oscuro"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Notificaciones"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Privacidad")));
+const NotificationsBodyComponent = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "title3",
+  weight: "medium",
+  style: {
+    marginBottom: '12px'
+  }
+}, "Notificaciones"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Gestiona tus notificaciones aqu\xED."), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Notificaciones por email"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Alertas de sistema"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Recordatorios")));
+const HelpBodyComponent = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "title3",
+  weight: "medium",
+  style: {
+    marginBottom: '12px'
+  }
+}, "Ayuda"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Encuentra respuestas a tus preguntas."), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Documentaci\xF3n"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Preguntas frecuentes"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2"
+}, "\u2022 Soporte t\xE9cnico")));
 var _default = exports.default = {
   args: {
     children: mockContent,
@@ -695,6 +784,65 @@ const V1LargeSize = exports.V1LargeSize = {
   },
   name: 'V1 - Tamaño Grande'
 };
+const V1WithAdditionalContent = exports.V1WithAdditionalContent = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Contenido Adicional',
+    subtitle: 'Panel con sidebar de navegación',
+    panelSide: 'right',
+    size: 'M',
+    additionalContent: [{
+      id: 'settings',
+      Icon: 'IconSettings',
+      BodyComponent: SettingsBodyComponent,
+      tooltipProps: {
+        content: 'Configuración'
+      }
+    }, {
+      id: 'notifications',
+      Icon: 'IconBell',
+      BodyComponent: NotificationsBodyComponent,
+      tooltipProps: {
+        content: 'Notificaciones'
+      }
+    }, {
+      id: 'help',
+      Icon: 'IconHelpCircle',
+      BodyComponent: HelpBodyComponent,
+      tooltipProps: {
+        content: 'Ayuda'
+      }
+    }],
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "title2",
+      weight: "medium",
+      style: {
+        marginBottom: '16px'
+      }
+    }, "Contenido Principal"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1",
+      style: {
+        marginBottom: '12px'
+      }
+    }, "Este panel demuestra el nuevo m\xF3dulo AdditionalContent."), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body2",
+      colorTheme: "gray"
+    }, "Haz click en los iconos de la barra lateral derecha para ver el contenido adicional. El panel ahora tiene una arquitectura modular con subcomponentes separados."))
+  },
+  name: 'V1 - Con Contenido Adicional',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Panel V1 con el nuevo módulo AdditionalContent. Incluye una barra lateral de navegación con tooltips y componentes de contenido dinámico.'
+      }
+    }
+  }
+};
 const Playground = exports.Playground = {
   args: {
     version: 'V1',

package/dist/components/UTPanel/versions/V1/DOCUMENTATION.md

@@ -0,0 +1,307 @@
+# UTPanel V1 - Documentación
+
+## Estructura del Componente
+
+El componente `UTPanel V1` está organizado en **5 secciones principales**:
+
+### Sección 1: Control Area
+Barra de control ubicada en la parte superior del panel.
+
+**Componentes incluidos:**
+- Back Button (opcional)
+- Pagination (opcional)
+- Close Button (siempre a la derecha)
+- Progress Bar (solo si `isWorkflow={true}`)
+
+### Sección 2: Contenido Principal (Flex Row)
+
+#### Subsección 2.1: Main Content Section
+Contenido principal del panel que se expande dinámicamente.
+
+**Composición:**
+- Header (si `hideHeader !== true`)
+- Header Items (si existen)
+- Body (área scrollable principal)
+- Main Button (si `hideMainButton !== true`)
+
+#### Subsección 2.2 & 2.3: Additional Content Module
+Módulo opcional que incluye un panel lateral con navegación.
+
+**Composición:**
+- Body Component: Panel de contenido (450px, ancho fijo)
+- Sidebar: Barra de navegación (56px, ancho fijo)
+
+---
+
+## AdditionalContent - Nuevo Agregado
+
+### ¿Qué es?
+
+El módulo `AdditionalContent` permite agregar un panel lateral secundario al `UTPanel` con navegación mediante iconos. Es ideal para:
+- Paneles de configuración
+- Menús secundarios
+- Navegación por pestañas
+- Contenido complementario
+
+### Interface esperada
+
+```typescript
+interface AdditionalContentElement {
+  id: string;                          // Identificador único
+  Icon: string;                        // Nombre del icono (ej: "IconSettings")
+  BodyComponent: React.FC<any>;        // Componente a renderizar
+  tooltipProps: {
+    content: string;                   // Contenido del tooltip
+    arrow?: boolean;                   // Mostrar flecha del tooltip (default: true)
+    tippyProps?: {
+      placement?: string;              // "top" | "bottom" | "left" | "right" | etc
+      hideOnClick?: boolean;
+      interactive?: boolean;
+      duration?: [number, number];     // [show delay, hide delay]
+      [key: string]: any;
+    };
+    stringContentProps?: object;       // Props adicionales para el contenido
+    stringContentClassName?: string;   // CSS customizado para el contenido
+  }
+}
+
+type AdditionalContent = AdditionalContentElement[] | undefined
+```
+
+### Ejemplo de uso
+
+```jsx
+import { UTPanel } from '@widergy/energy-ui';
+
+// Definir componentes de contenido
+const SettingsBody = () => (
+  <div style={{ padding: '16px' }}>
+    <h3>Configuración</h3>
+    <p>Contenido de configuración aquí</p>
+  </div>
+);
+
+const NotificationsBody = () => (
+  <div style={{ padding: '16px' }}>
+    <h3>Notificaciones</h3>
+    <p>Contenido de notificaciones aquí</p>
+  </div>
+);
+
+// Crear array de AdditionalContent - Simple
+const additionalContent = [
+  {
+    id: 'settings',
+    Icon: 'IconSettings',
+    BodyComponent: SettingsBody,
+    tooltipProps: {
+      content: 'Configuración'
+      // Los props de Tippy se aplican automáticamente:
+      // - placement: 'right' (por defecto)
+      // - zIndex: 9999
+      // - appendTo: document.body (para evitar overflow: hidden)
+    }
+  },
+  {
+    id: 'notifications',
+    Icon: 'IconBell',
+    BodyComponent: NotificationsBody,
+    tooltipProps: {
+      content: 'Notificaciones'
+      // Sin necesidad de repetir tippyProps
+    }
+  }
+];
+
+// Con configuración personalizada de Tippy (opcional)
+const additionalContentAdvanced = [
+  {
+    id: 'settings',
+    Icon: 'IconSettings',
+    BodyComponent: SettingsBody,
+    tooltipProps: {
+      content: 'Configuración',
+      tippyProps: {
+        placement: 'left',  // Cambiar posición si deseas
+        zIndex: 5000        // Cambiar z-index si deseas
+        // appendTo se aplica automáticamente
+      }
+    }
+  }
+];
+
+// Usar en el componente
+<UTPanel
+  additionalContent={additionalContent}
+  title="Mi Panel"
+  open={true}
+  // ... otros props
+>
+  Contenido principal aquí
+</UTPanel>
+```
+
+**Nota**: El componente `AdditionalContentModule` aplica automáticamente los props necesarios para que los tooltips se vean correctamente:
+- **placement**: 'right' (predeterminado)
+- **zIndex**: 9999 (por encima de todo)
+- **appendTo**: `document.body` (para evitar ser cortados por `overflow: hidden`)
+
+Si necesitas personalizar alguno de estos valores, puedes hacerlo en `tippyProps`.
+
+### Comportamiento
+
+- **Primera opción preseleccionada**: La primera opción del array se selecciona automáticamente
+- **BodyComponent oculto**: Si no hay ninguna opción seleccionada, el panel de contenido se oculta (solo se muestra la sidebar)
+- **Sidebar siempre visible**: La barra lateral con iconos está siempre visible si `additionalContent` está definido
+- **Ancho dinámico**: El panel total expande automáticamente:
+  - Sin AdditionalContent: 300px | 450px | 600px (según `size`)
+  - Con AdditionalContent: +506px adicionales (450px body + 56px sidebar)
+
+### Propiedades del Panel con AdditionalContent
+
+| Propiedad | Tipo | Valor |
+|-----------|------|-------|
+| `additionalContent` | `AdditionalContentElement[]` | Array de opciones |
+| `size` | `"S" \| "M" \| "L"` | Tamaño del mainContentSection |
+| Ancho total | - | mainContentSection + 506px |
+
+**Ejemplos de tamaños finales:**
+- Size S: 300px + 506px = 806px
+- Size M: 450px + 506px = 956px
+- Size L: 600px + 506px = 1106px
+
+### Reglas de CSS
+
+El componente utiliza Flexbox con las siguientes características:
+
+```css
+.contentRowContainer {
+  display: flex;
+  flex-direction: row;        /* Alineación horizontal */
+  flex: 1;                    /* Toma espacio disponible */
+}
+
+.mainContentSection {
+  flex: 1;                    /* Se expande dinámicamente */
+  min-width: 0;               /* Permite shrink a 0 si es necesario */
+}
+
+.bodyComponent {
+  width: 450px;
+  flex-shrink: 0;             /* No se reduce */
+}
+
+.sidebar {
+  width: 56px;
+  flex-shrink: 0;             /* No se reduce */
+}
+```
+
+---
+
+## Props existentes (compatibles)
+
+Todos los props anteriores funcionan sin cambios:
+
+```typescript
+<UTPanel
+  // Control Area
+  showBackButton={boolean}
+  showPagination={boolean}
+  hideCloseButton={boolean}
+  isWorkflow={boolean}
+  
+  // Header
+  hideHeader={boolean}
+  title={string}
+  subtitle={string}
+  headerItems={array}
+  
+  // Body
+  children={ReactNode}
+  disableScrollbar={boolean}
+  
+  // Main Button
+  hideMainButton={boolean}
+  mainButton={object}
+  
+  // Layout
+  size={"S" | "M" | "L"}
+  
+  // Callbacks
+  onClose={function}
+  onGoBack={function}
+  
+  // Nuevo prop
+  additionalContent={array}
+/>
+```
+
+---
+
+## Estructura de archivos
+
+```
+src/lib/components/UTPanel/versions/V1/
+├── index.js                           # Componente principal
+├── styles.module.scss                 # Estilos principales
+├── constants.js                       # Constantes compartidas
+├── theme.js                           # Tema/estilos avanzados
+├── DOCUMENTATION.md                   # Este archivo
+├── components/
+│   ├── AdditionalContentModule/
+│   │   ├── index.js                   # Módulo de contenido adicional
+│   │   └── styles.module.scss         # Estilos del módulo
+│   ├── BodySection/
+│   │   └── index.js                   # Sección del cuerpo principal
+│   ├── ControlAreaSection/
+│   │   └── index.js                   # Sección de control (botones, paginación)
+│   ├── HeaderSection/
+│   │   └── index.js                   # Sección del header
+│   └── DataItem/
+│       └── index.js                   # Componente de item
+```
+
+---
+
+## Data Test IDs
+
+El componente incluye `dataTestId` para facilitar las pruebas automatizadas. Todos los IDs están definidos en `src/lib/constants/testIds.js`.
+
+### IDs disponibles
+
+| Elemento | dataTestId | Descripción |
+|----------|------------|-------------|
+| Back Button | `panel.backButton` | Botón de retroceso |
+| Close Button | `panel.closeButton` | Botón de cerrar |
+| Title | `panel.title` | Título del panel |
+| Main Action | `panel.mainAction` | Botón de acción principal del header |
+| Secondary Action | `panel.secondaryAction` | Botón de acción secundaria del header |
+| Main Button | `panel.mainButton` | Botón principal del footer |
+| Pagination Prev | `panel.paginationPrev` | Botón de página anterior |
+| Pagination Next | `panel.paginationNext` | Botón de página siguiente |
+| Additional Content Body | `panel.additionalContent.additionalContentBody` | Contenedor del cuerpo adicional |
+| Additional Content Sidebar | `panel.additionalContent.sidebar` | Barra lateral del contenido adicional |
+| Sidebar Button | `panel.additionalContent.sidebarButton.{id}` | Botón de la sidebar (dinámico por `id`) |
+| Sidebar Button Tooltip | `panel.additionalContent.sidebarButton.{id}.tooltip` | Tooltip del botón (dinámico por `id`) |
+
+### Ejemplo de uso en tests
+
+```javascript
+// Usando Testing Library
+const backButton = screen.getByTestId('panel.backButton');
+const mainButton = screen.getByTestId('panel.mainButton');
+const settingsButton = screen.getByTestId('panel.additionalContent.sidebarButton.settings');
+
+// Verificar que el sidebar existe
+expect(screen.getByTestId('panel.additionalContent.sidebar')).toBeInTheDocument();
+```
+
+---
+
+## Notas de desarrollo
+
+- El componente mantiene **compatibilidad total** con versiones anteriores
+- No hay breaking changes
+- El módulo `AdditionalContent` es **completamente opcional**
+- El panel sin `additionalContent` funciona exactamente como antes

package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+require("react-perfect-scrollbar/dist/css/styles.css");
+var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
+var _testIds = require("../../../../../../constants/testIds");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const {
+  panel
+} = _testIds.TEST_IDS;
+const AdditionalContentModule = _ref => {
+  let {
+    activeId,
+    additionalContent,
+    onSelectItem,
+    tooltipContainer
+  } = _ref;
+  const activeContent = (0, _react.useMemo)(() => additionalContent.find(item => item.id === activeId), [additionalContent, activeId]);
+  if (!additionalContent || additionalContent.length === 0) {
+    return null;
+  }
+  const ActiveBodyComponent = activeContent === null || activeContent === void 0 ? void 0 : activeContent.BodyComponent;
+  const defaultTooltipContainer = tooltipContainer || (() => document.body);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.additionalContentWrapper
+  }, activeContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bodyComponent,
+    "data-testid": panel.additionalContent.body
+  }, ActiveBodyComponent && /*#__PURE__*/_react.default.createElement(ActiveBodyComponent, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.sidebar, " ").concat(!activeContent ? _stylesModule.default.sidebarCollapsed : ''),
+    "data-testid": panel.additionalContent.sidebar
+  }, /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    options: {
+      suppressScrollX: true
+    },
+    className: _stylesModule.default.sidebarScroll
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.sidebarContent
+  }, additionalContent.map(item => {
+    var _item$tooltipProps, _item$tooltipProps2, _item$tooltipProps$ti, _item$tooltipProps3, _item$tooltipProps4, _item$tooltipProps5;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.id,
+      className: _stylesModule.default.sidebarItemWrapper
+    }, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
+      content: ((_item$tooltipProps = item.tooltipProps) === null || _item$tooltipProps === void 0 ? void 0 : _item$tooltipProps.content) || item.id,
+      dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id, ".tooltip"),
+      tippyProps: {
+        placement: ((_item$tooltipProps2 = item.tooltipProps) === null || _item$tooltipProps2 === void 0 || (_item$tooltipProps2 = _item$tooltipProps2.tippyProps) === null || _item$tooltipProps2 === void 0 ? void 0 : _item$tooltipProps2.placement) || 'right',
+        zIndex: (_item$tooltipProps$ti = (_item$tooltipProps3 = item.tooltipProps) === null || _item$tooltipProps3 === void 0 || (_item$tooltipProps3 = _item$tooltipProps3.tippyProps) === null || _item$tooltipProps3 === void 0 ? void 0 : _item$tooltipProps3.zIndex) !== null && _item$tooltipProps$ti !== void 0 ? _item$tooltipProps$ti : 9999,
+        appendTo: ((_item$tooltipProps4 = item.tooltipProps) === null || _item$tooltipProps4 === void 0 || (_item$tooltipProps4 = _item$tooltipProps4.tippyProps) === null || _item$tooltipProps4 === void 0 ? void 0 : _item$tooltipProps4.appendTo) || defaultTooltipContainer,
+        ...(((_item$tooltipProps5 = item.tooltipProps) === null || _item$tooltipProps5 === void 0 ? void 0 : _item$tooltipProps5.tippyProps) || {})
+      }
+    }, (_ref2 => {
+      let {
+        _,
+        ...rest
+      } = _ref2;
+      return rest;
+    })(item.tooltipProps)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      colorTheme: activeId === item.id ? 'primary' : 'gray',
+      className: "".concat(_stylesModule.default.sidebarButton),
+      dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
+      Icon: item.Icon,
+      onClick: () => onSelectItem(activeId === item.id ? null : item.id),
+      size: "medium",
+      variant: activeId === item.id ? 'semitransparent' : 'text'
+    }))));
+  })))));
+};
+AdditionalContentModule.propTypes = {
+  additionalContent: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.string.isRequired,
+    Icon: _propTypes.string.isRequired,
+    BodyComponent: _propTypes.elementType.isRequired,
+    tooltipProps: _propTypes.object.isRequired
+  })).isRequired,
+  activeId: _propTypes.string,
+  onSelectItem: _propTypes.func.isRequired,
+  tooltipContainer: _propTypes.func
+};
+var _default = exports.default = AdditionalContentModule;

package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/styles.module.scss

@@ -0,0 +1,85 @@
+$body-component-width: 450px;
+$sidebar-width: 56px;
+
+.additionalContentWrapper {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.bodyComponent {
+  background-color: var(--light02);
+  border-bottom-left-radius: 8px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: var(--light04);
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-top-left-radius: 8px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: $body-component-width;
+  opacity: 1;
+  overflow: hidden;
+  padding: 16px;
+  width: $body-component-width;
+}
+
+.sidebar {
+  background-color: var(--light02);
+  border-top-color: var(--light04);
+  border-top-style: solid;
+  border-top-width: 1px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: $sidebar-width;
+  overflow: visible;
+  position: relative;
+  width: $sidebar-width;
+  z-index: 10;
+}
+
+.sidebarCollapsed {
+  background-color: var(--light01);
+  border-color: var(--light04);
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-top-left-radius: 8px;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.sidebarScroll {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sidebarContent {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 0;
+}
+
+.sidebarItemWrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0 8px;
+}
+
+.sidebarButton {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  transition: all 0.2s ease;
+  width: 40px;
+}