energy-components 1.8.0 → 1.9.0

package/dist/components/fileUploadItem.es.js

@@ -0,0 +1,182 @@
+import { defineComponent as M, ref as N, computed as c, createElementBlock as l, openBlock as o, normalizeClass as $, createElementVNode as r, renderSlot as v, createVNode as p, createCommentVNode as n, toDisplayString as m, withModifiers as I } from "vue";
+import { R as g } from "./icon-svg-_WCkLP8-.js";
+import z from "./progressBar.es.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/fileUploadItem.css';const R = { class: "rds-e-file-upload-item__icon-container" }, w = { class: "rds-e-file-upload-item__details" }, E = { class: "rds-e-file-upload-item__info-wrapper" }, F = { class: "rds-e-file-upload-item__name" }, x = {
+  key: 0,
+  class: "rds-e-file-upload-item__meta"
+}, D = { class: "rds-e-file-upload-item__size" }, P = {
+  key: 0,
+  class: "rds-e-file-upload-item__time-remaining"
+}, V = {
+  key: 1,
+  class: "rds-e-file-upload-item__error-message"
+}, q = {
+  key: 0,
+  class: "rds-e-file-upload-item__progress-indicator-container"
+}, T = { class: "rds-e-file-upload-item__action" }, j = ["aria-label", "disabled"], A = /* @__PURE__ */ M({
+  __name: "file-upload-item",
+  props: {
+    /**
+     * Identificador único para el ítem de archivo (opcional, pero útil para eventos).
+     */
+    id: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Nombre del archivo a mostrar.
+     */
+    fileName: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Tamaño del archivo en bytes.
+     */
+    fileSize: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Nombre del icono a mostrar para el archivo.
+     * Ver la sección 'Options > Icon' en el diseño para ejemplos.
+     * Por defecto es 'document_generic' (representando "Document final content").
+     */
+    fileIcon: {
+      type: String,
+      default: "document-final-content"
+    },
+    /**
+     * Estado actual del ítem de archivo.
+     * Determina la apariencia y elementos mostrados (ej. barra de progreso, mensaje de error).
+     * Posibles valores: 'default', 'uploading', 'error', 'disabled'.
+     */
+    status: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "uploading", "error", "disabled"].includes(e)
+    },
+    /**
+     * Progreso de la subida (0-100). Usado por RDSProgressBar si showProgressBar es true.
+     */
+    progress: {
+      type: Number,
+      default: 0,
+      validator: (e) => e >= 0 && e <= 100
+    },
+    /**
+     * Texto que indica el tiempo restante de subida (ej. "4 second left").
+     * Solo visible si status es 'uploading'.
+     */
+    timeRemaining: {
+      type: String,
+      default: null
+    },
+    /**
+     * Mensaje de error a mostrar. Solo visible si status es 'error'.
+     * Reemplaza el campo de detalle con el contexto de error.
+     */
+    errorMessage: {
+      type: String,
+      default: null
+    },
+    /**
+     * Indica si el componente está deshabilitado.
+     * Esto aplicará estilos de deshabilitado y prevendrá interacciones.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Define la acción disponible para el ítem.
+     * Por defecto es una acción de eliminar.
+     * Ejemplo: { type: 'delete', icon: 'delete', label: 'Eliminar archivo' }
+     */
+    action: {
+      type: Object,
+      default: () => ({ type: "delete", icon: "delete", label: "Eliminar archivo" })
+    },
+    /**
+     * Indica si se debe mostrar el componente RDSProgressBar durante el estado 'uploading'.
+     * Si es false, no se muestra ninguna barra de progreso.
+     */
+    showProgressBar: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["action"],
+  setup(e, { emit: _ }) {
+    const s = e, b = _, f = N(!1), a = c(() => s.disabled ? "disabled" : s.status), y = c(() => {
+      const t = [`rds-e-file-upload-item--${a.value}`];
+      return f.value && a.value !== "disabled" && a.value !== "uploading" && a.value !== "error" && t.push("rds-e-file-upload-item--hover"), t;
+    }), h = c(() => s.fileIcon), S = c(() => {
+      const t = s.fileSize;
+      if (t === 0) return "0 Bytes";
+      const i = 1024, d = ["Bytes", "KB", "MB", "GB", "TB"], u = Math.floor(Math.log(t) / Math.log(i)), k = u === 1 ? 0 : u > 1 ? 1 : 0;
+      return `${Number.parseFloat((t / i ** u).toFixed(k))} ${d[u]}`;
+    }), B = (t) => {
+      !s.disabled && t && b("action", { actionType: t.type, fileId: s.id });
+    };
+    return (t, i) => (o(), l("div", {
+      class: $(["rds-e-file-upload-item rds-radius-inputs", [y.value]]),
+      onMouseover: i[1] || (i[1] = (d) => f.value = !0),
+      onMouseleave: i[2] || (i[2] = (d) => f.value = !1)
+    }, [
+      r("div", R, [
+        v(t.$slots, "file-icon", {}, () => [
+          p(g, {
+            name: h.value,
+            class: "rds-e-file-upload-item__file-icon",
+            "aria-hidden": "true"
+          }, null, 8, ["name"])
+        ], !0)
+      ]),
+      r("div", w, [
+        r("div", E, [
+          r("span", F, m(e.fileName), 1),
+          a.value !== "error" ? (o(), l("div", x, [
+            r("span", D, m(S.value), 1),
+            a.value === "uploading" && e.timeRemaining ? (o(), l("span", P, m(e.timeRemaining), 1)) : n("", !0)
+          ])) : n("", !0),
+          a.value === "error" && e.errorMessage ? (o(), l("div", V, m(e.errorMessage), 1)) : n("", !0)
+        ]),
+        a.value === "uploading" && e.showProgressBar ? (o(), l("div", q, [
+          p(z, {
+            class: "rds-e-file-upload-item__progress-bar",
+            step: e.progress,
+            "max-steps": 100,
+            percentage: !1,
+            "back-button": !1,
+            "white-bar": "",
+            "hide-counter": "",
+            inverse: ""
+          }, null, 8, ["step"])
+        ])) : n("", !0)
+      ]),
+      r("div", T, [
+        v(t.$slots, "action", {}, () => [
+          e.action ? (o(), l("button", {
+            key: 0,
+            type: "button",
+            class: "rds-e-file-upload-item__action-button",
+            "aria-label": e.action.label || "Eliminar archivo",
+            disabled: e.disabled,
+            onClick: i[0] || (i[0] = I((d) => B(e.action), ["stop"]))
+          }, [
+            p(g, {
+              name: e.action.icon,
+              class: "rds-e-file-upload-item__action-icon",
+              "aria-hidden": "true"
+            }, null, 8, ["name"])
+          ], 8, j)) : n("", !0)
+        ], !0)
+      ])
+    ], 34));
+  }
+}), U = /* @__PURE__ */ C(A, [["__scopeId", "data-v-1de9506e"]]);
+export {
+  U as default
+};

package/dist/components/filterChip.es.js

@@ -1,10 +1,13 @@
-import { defineComponent as m, ref as g, computed as y, createElementBlock as c, openBlock as l, normalizeClass as b, createElementVNode as s, createBlock as a, createCommentVNode as r, toDisplayString as n } from "vue";
+import { defineComponent as g, ref as b, computed as c, createElementBlock as s, openBlock as l, normalizeClass as y, createCommentVNode as r, createElementVNode as _, createBlock as a, toDisplayString as n } from "vue";
 import { R as o } from "./icon-svg-_WCkLP8-.js";
-import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/filterChip.css';const k = ["disabled"], C = { class: "rds-e-filter-chip__icon-container" }, I = {
+import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/filterChip.css';const C = ["disabled"], I = {
+  key: 0,
+  class: "rds-e-filter-chip__icon-container"
+}, N = {
   key: 1,
   class: "rds-e-filter-chip__number"
-}, w = { class: "rds-e-filter-chip__text" }, B = /* @__PURE__ */ m({
+}, w = { class: "rds-e-filter-chip__text" }, B = /* @__PURE__ */ g({
   __name: "filter-chip",
   props: {
     /**
@@ -22,14 +25,15 @@ import './style/filterChip.css';const k = ["disabled"], C = { class: "rds-e-filt
      */
     leftIcon: {
       type: String,
-      default: "check"
+      default: ""
     },
     /**
      * <span>Numero a mostrar en el chip (a la izquierda)</span>
      */
     leftNumber: {
       type: String,
-      default: ""
+      default: "",
+      validator: (e) => e.length <= 2
     },
     /**
      * <span>Indica si se muestra el icono de flecha a la derecha</span>
@@ -76,39 +80,39 @@ import './style/filterChip.css';const k = ["disabled"], C = { class: "rds-e-filt
   },
   emits: ["onClickChip"],
   setup(e, { emit: d }) {
-    const t = e, f = d, h = g(null), u = y(() => {
+    const t = e, f = d, h = b(null), u = c(() => t.leftNumber.slice(0, 2)), p = c(() => {
       const i = ["rds-e-filter-chip"];
-      return i.push(`rds-e-filter-chip--${t.surfaceType}`), t.disabled && i.push("rds-e-filter-chip--disabled"), t.selected && !t.highlight && i.push("rds-e-filter-chip--selected"), t.highlight && i.push("rds-e-filter-chip--highlight"), t.selected && t.highlight && i.push("rds-e-filter-chip--selected-highlight"), t.arrowIcon && i.push("rds-e-filter-chip--with-arrow"), i;
-    }), p = () => {
+      return i.push(`rds-e-filter-chip--${t.surfaceType}`), t.disabled && i.push("rds-e-filter-chip--disabled"), t.selected && !t.highlight && i.push("rds-e-filter-chip--selected"), t.highlight && i.push("rds-e-filter-chip--highlight"), t.selected && t.highlight && i.push("rds-e-filter-chip--selected-highlight"), t.arrowIcon && i.push("rds-e-filter-chip--with-arrow"), !t.leftIcon && !t.leftNumber && i.push("rds-e-filter-chip--no-icon"), i;
+    }), m = () => {
       t.disabled || f("onClickChip", t.filterValue);
     };
-    return (i, S) => (l(), c("button", {
+    return (i, S) => (l(), s("button", {
       ref_key: "chipRef",
       ref: h,
-      class: b(u.value),
+      class: y(p.value),
       disabled: e.disabled,
       type: "button",
-      onClick: p
+      onClick: m
     }, [
-      s("span", C, [
-        e.leftIcon && !e.leftNumber ? (l(), a(o, {
+      e.leftIcon || e.leftNumber ? (l(), s("span", I, [
+        e.leftNumber ? r("", !0) : (l(), a(o, {
           key: 0,
           name: e.leftIcon,
           class: "rds-e-filter-chip__icon",
           "aria-hidden": "true"
-        }, null, 8, ["name"])) : r("", !0),
-        e.leftNumber && !e.leftIcon ? (l(), c("span", I, n(e.leftNumber), 1)) : r("", !0)
-      ]),
-      s("span", w, n(e.text), 1),
+        }, null, 8, ["name"])),
+        e.leftNumber && !e.leftIcon ? (l(), s("span", N, n(u.value), 1)) : r("", !0)
+      ])) : r("", !0),
+      _("span", w, n(e.text), 1),
       e.arrowIcon ? (l(), a(o, {
-        key: 0,
+        key: 1,
         name: "arrow_down",
         class: "rds-e-filter-chip__arrow-icon",
         "aria-hidden": "true"
       })) : r("", !0)
-    ], 10, k));
+    ], 10, C));
   }
-}), R = /* @__PURE__ */ _(B, [["__scopeId", "data-v-58cf5c6f"]]);
+}), V = /* @__PURE__ */ k(B, [["__scopeId", "data-v-87cd4451"]]);
 export {
-  R as default
+  V as default
 };

package/dist/components/index.es.js

@@ -4,80 +4,88 @@ import e from "./floatingActionButton.es.js";
 import m from "./actionButton.es.js";
 import S from "./checkbox.es.js";
 import D from "./textField.es.js";
-import n from "./textArea.es.js";
-import p from "./switch.es.js";
-import R from "./radioButton.es.js";
+import p from "./textArea.es.js";
+import R from "./switch.es.js";
+import n from "./radioButton.es.js";
 import { _ as s } from "./radio-group.vue_vue_type_script_setup_true_lang-DpguLlRK.js";
 import c from "./dropdown.es.js";
 import d from "./datepicker.es.js";
 import f from "./quantitySelector.es.js";
 import l from "./toggle.es.js";
 import u from "./selectionChip.es.js";
-import g from "./filterChip.es.js";
+import A from "./filterChip.es.js";
 import b from "./dragAndDrop.es.js";
-import B from "./tag.es.js";
-import T from "./accordionGroup.es.js";
-import A from "./accordion.es.js";
-import h from "./divider.es.js";
-import x from "./card.es.js";
-import w from "./tablepaginatedcomponent.es.js";
+import g from "./fileUploadItem.es.js";
+import T from "./tag.es.js";
+import B from "./accordionGroup.es.js";
+import h from "./accordion.es.js";
+import x from "./divider.es.js";
+import I from "./card.es.js";
+import v from "./tablepaginatedcomponent.es.js";
+import w from "./avatar.es.js";
 import C from "./link.es.js";
 import P from "./breadcrumbs.es.js";
 import _ from "./tabBar.es.js";
 import y from "./pagination.es.js";
-import I from "./indicator.es.js";
-import v from "./persistentToast.es.js";
-import k from "./infoBox.es.js";
-import F from "./progressBar.es.js";
-import G from "./modal.es.js";
-import M from "./overlay.es.js";
-import O from "./tooltip.es.js";
-import j from "./sidebar.es.js";
-import Q from "./sidedrawer.es.js";
+import F from "./directAccess.es.js";
+import k from "./indicator.es.js";
+import G from "./persistentToast.es.js";
+import L from "./infoBox.es.js";
+import M from "./progressBar.es.js";
+import O from "./loader.es.js";
+import U from "./modal.es.js";
+import j from "./overlay.es.js";
+import Q from "./tooltip.es.js";
+import V from "./sidebar.es.js";
+import q from "./sidedrawer.es.js";
 const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  RDSAccordion: A,
-  RDSAccordionGroup: T,
+  RDSAccordion: h,
+  RDSAccordionGroup: B,
   RDSActionButton: m,
+  RDSAvatar: w,
   RDSBreadcrumbs: P,
   RDSButton: a,
-  RDSCard: x,
+  RDSCard: I,
   RDSCheckbox: S,
   RDSDatePicker: d,
-  RDSDivider: h,
+  RDSDirectAccess: F,
+  RDSDivider: x,
   RDSDragAndDrop: b,
   RDSDropdown: c,
-  RDSFilterChip: g,
+  RDSFileUploadItem: g,
+  RDSFilterChip: A,
   RDSFloatinActionButton: e,
   RDSIconSvg: i,
-  RDSIndicator: I,
-  RDSInfoBox: k,
+  RDSIndicator: k,
+  RDSInfoBox: L,
   RDSLink: C,
-  RDSModal: G,
-  RDSOverlay: M,
+  RDSLoader: O,
+  RDSModal: U,
+  RDSOverlay: j,
   RDSPagination: y,
-  RDSPersistentToast: v,
-  RDSProgressBar: F,
+  RDSPersistentToast: G,
+  RDSProgressBar: M,
   RDSQuantitySelector: f,
-  RDSRadioButton: R,
+  RDSRadioButton: n,
   RDSRadioGroup: s,
   RDSSelectionChip: u,
-  RDSSidebar: j,
-  RDSSidedrawer: Q,
-  RDSSwitch: p,
+  RDSSidebar: V,
+  RDSSidedrawer: q,
+  RDSSwitch: R,
   RDSTabBar: _,
-  RDSTable: w,
-  RDSTag: B,
-  RDSTextArea: n,
+  RDSTable: v,
+  RDSTag: T,
+  RDSTextArea: p,
   RDSTextField: D,
   RDSToggle: l,
-  RDSTooltip: O
+  RDSTooltip: Q
 }, Symbol.toStringTag, { value: "Module" }));
-let V;
-function ho(o) {
-  V = o;
+let z;
+function yo(o) {
+  z = o;
 }
-const xo = {
+const Fo = {
   install: (o) => {
     for (const r in t)
       o.component(
@@ -87,43 +95,47 @@ const xo = {
   }
 };
 export {
-  A as RDSAccordion,
-  T as RDSAccordionGroup,
+  h as RDSAccordion,
+  B as RDSAccordionGroup,
   m as RDSActionButton,
+  w as RDSAvatar,
   P as RDSBreadcrumbs,
   a as RDSButton,
-  x as RDSCard,
+  I as RDSCard,
   S as RDSCheckbox,
   d as RDSDatePicker,
-  h as RDSDivider,
+  F as RDSDirectAccess,
+  x as RDSDivider,
   b as RDSDragAndDrop,
   c as RDSDropdown,
-  g as RDSFilterChip,
+  g as RDSFileUploadItem,
+  A as RDSFilterChip,
   e as RDSFloatinActionButton,
   i as RDSIconSvg,
-  I as RDSIndicator,
-  k as RDSInfoBox,
+  k as RDSIndicator,
+  L as RDSInfoBox,
   C as RDSLink,
-  G as RDSModal,
-  M as RDSOverlay,
+  O as RDSLoader,
+  U as RDSModal,
+  j as RDSOverlay,
   y as RDSPagination,
-  v as RDSPersistentToast,
-  F as RDSProgressBar,
+  G as RDSPersistentToast,
+  M as RDSProgressBar,
   f as RDSQuantitySelector,
-  R as RDSRadioButton,
+  n as RDSRadioButton,
   s as RDSRadioGroup,
   u as RDSSelectionChip,
-  j as RDSSidebar,
-  Q as RDSSidedrawer,
-  p as RDSSwitch,
+  V as RDSSidebar,
+  q as RDSSidedrawer,
+  R as RDSSwitch,
   _ as RDSTabBar,
-  w as RDSTable,
-  B as RDSTag,
-  n as RDSTextArea,
+  v as RDSTable,
+  T as RDSTag,
+  p as RDSTextArea,
   D as RDSTextField,
   l as RDSToggle,
-  O as RDSTooltip,
-  V as VueInstance,
-  xo as default,
-  ho as setVueInstance
+  Q as RDSTooltip,
+  z as VueInstance,
+  Fo as default,
+  yo as setVueInstance
 };

package/dist/components/link.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as j, toRefs as E, computed as f, createBlock as d, openBlock as r, resolveDynamicComponent as L, unref as e, normalizeClass as m, withCtx as N, createCommentVNode as i, createElementBlock as S, mergeProps as _, renderSlot as b, createTextVNode as B, toDisplayString as I } from "vue";
-import { R as k } from "./icon-svg-_WCkLP8-.js";
-import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/link.css';const $ = /* @__PURE__ */ j({
+import { defineComponent as E, toRefs as L, computed as c, createBlock as p, openBlock as o, resolveDynamicComponent as N, unref as e, normalizeStyle as V, normalizeClass as _, withCtx as $, createCommentVNode as i, createElementBlock as b, mergeProps as k, renderSlot as B, createTextVNode as I, toDisplayString as D } from "vue";
+import { R as v } from "./icon-svg-_WCkLP8-.js";
+import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/link.css';const O = /* @__PURE__ */ E({
   __name: "link",
   props: {
     /**
@@ -73,86 +73,98 @@ import './style/link.css';const $ = /* @__PURE__ */ j({
     customClass: {
       type: String,
       default: ""
+    },
+    /**
+     * <span>Color personalizado para el link. Si se define, sobrescribe el color por defecto. Puede ser cualquier valor CSS válido: #333, rgb(), var(--color), etc.</span>
+     */
+    color: {
+      type: String,
+      default: ""
     }
   },
   setup(s) {
-    const v = s, {
-      text: y,
-      to: g,
-      icon: n,
-      tag: o,
-      disabled: c,
-      inverse: p,
-      arrow: u,
+    const y = s, {
+      text: g,
+      to: w,
+      icon: r,
+      tag: u,
+      disabled: f,
+      inverse: m,
+      arrow: d,
       right: t,
       underline: h,
-      customClass: D
-    } = E(v), R = f(() => {
-      var l, C;
+      customClass: R,
+      color: l
+    } = L(y), j = c(() => l.value ? { color: l.value } : void 0), z = c(() => {
+      var n, C;
       const a = ["rds-e-link"];
-      return p.value && a.push("rds-e-link--inverse"), h.value && a.push("rds-e-link--underline"), c.value && a.push("rds-e-style-state-disabled"), ((l = n == null ? void 0 : n.value) == null ? void 0 : l.name) !== "arrow" && a.push("link"), ((C = n == null ? void 0 : n.value) == null ? void 0 : C.name) !== "arrow" && p.value && a.push("link__icon--inverse"), a.join(" ");
-    }), w = f(() => {
-      var l;
-      const a = ["link__icon--arrow"];
-      return n != null && n.value && (a.push("link__icon"), c.value && a.push("link__icon--disabled")), ((l = n == null ? void 0 : n.value) == null ? void 0 : l.name) !== "arrow" && p.value && a.push("link__icon--inverse"), a.push(
-        t.value ? "link__icon--animation-right" : "link__icon--animation-left"
+      return m.value && a.push("rds-e-link--inverse"), h.value && a.push("rds-e-link--underline"), f.value && a.push("rds-e-style-state-disabled"), ((n = r == null ? void 0 : r.value) == null ? void 0 : n.name) !== "arrow" && a.push("rds-e-arrow-link"), ((C = r == null ? void 0 : r.value) == null ? void 0 : C.name) !== "arrow" && m.value && a.push("rds-e-arrow-link__icon--inverse"), a.join(" ");
+    }), S = c(() => {
+      var n;
+      const a = ["rds-e-arrow-link__icon--arrow"];
+      return r != null && r.value && (a.push("rds-e-arrow-link__icon"), f.value && a.push("rds-e-arrow-link__icon--disabled")), ((n = r == null ? void 0 : r.value) == null ? void 0 : n.name) !== "arrow" && m.value && a.push("rds-e-arrow-link__icon--inverse"), a.push(
+        t.value ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left"
       ), a.join(" ");
-    }), x = f(() => {
+    }), x = c(() => {
       var a;
-      return u.value || ((a = n == null ? void 0 : n.value) == null ? void 0 : a.name);
+      return d.value || ((a = r == null ? void 0 : r.value) == null ? void 0 : a.name);
     });
-    return (a, l) => (r(), d(L(e(o) === "a" ? e(o) : "router-link"), {
-      class: m(R.value),
-      to: e(o) === "router-link" ? e(g) : null,
-      href: e(o) === "a" ? e(g) : null,
-      disable: e(c)
+    return (a, n) => (o(), p(N(e(u) === "a" ? e(u) : "router-link"), {
+      class: _(z.value),
+      to: e(u) === "router-link" ? e(w) : null,
+      href: e(u) === "a" ? e(w) : null,
+      disable: e(f),
+      style: V(j.value)
     }, {
-      default: N(() => [
-        e(n).name && !e(t) && !e(u) ? (r(), d(k, _({
+      default: $(() => [
+        e(r).name && !e(t) && !e(d) ? (o(), p(v, k({
           key: 0,
-          name: e(n).name
+          name: e(r).name
         }, {
-          ...e(n)
+          ...e(r)
         }, {
-          class: ["rds-e-link__icon-left", w.value]
-        }), null, 16, ["name", "class"])) : i("", !0),
-        e(t) ? (r(), S("span", {
+          class: ["rds-e-link__icon-left", S.value],
+          style: e(l) ? { color: e(l) } : void 0
+        }), null, 16, ["name", "class", "style"])) : i("", !0),
+        e(t) ? (o(), b("span", {
           key: 1,
-          class: m(["rds-e-link__text", [e(D), {
+          class: _(["rds-e-link__text", [e(R), {
             "rds-e-mr-xs": x.value,
             "rds-e-link__text--underline": e(h)
           }]])
         }, [
-          b(a.$slots, "default", {}, () => [
-            B(I(e(y)), 1)
+          B(a.$slots, "default", {}, () => [
+            I(D(e(g)), 1)
           ], !0)
         ], 2)) : i("", !0),
-        e(u) ? (r(), d(k, _({ key: 2 }, {
+        e(d) ? (o(), p(v, k({ key: 2 }, {
           name: e(t) ? "arrow_right" : "arrow_left"
         }, {
-          class: ["link__icon--arrow", [
-            e(t) ? "link__icon--animation-right" : "link__icon--animation-left"
-          ]]
-        }), null, 16, ["class"])) : i("", !0),
-        e(t) ? i("", !0) : (r(), S("span", {
+          class: ["rds-e-arrow-link__icon--arrow", [
+            e(t) ? "rds-e-arrow-link__icon--animation-right" : "rds-e-arrow-link__icon--animation-left"
+          ]],
+          style: e(l) ? { color: e(l) } : void 0
+        }), null, 16, ["class", "style"])) : i("", !0),
+        e(t) ? i("", !0) : (o(), b("span", {
           key: 3,
-          class: m(["rds-e-link__text", { "rds-e-ml-xs": x.value }])
+          class: _(["rds-e-link__text", { "rds-e-ml-xs": x.value }])
         }, [
-          b(a.$slots, "default", {}, () => [
-            B(I(e(y)), 1)
+          B(a.$slots, "default", {}, () => [
+            I(D(e(g)), 1)
           ], !0)
         ], 2)),
-        e(n).name && e(t) && !e(u) ? (r(), d(k, _({
+        e(r).name && e(t) && !e(d) ? (o(), p(v, k({
           key: 4,
-          name: e(n).name
-        }, e(n), {
-          class: ["rds-e-link__icon-right", w.value]
-        }), null, 16, ["name", "class"])) : i("", !0)
+          name: e(r).name
+        }, e(r), {
+          class: ["rds-e-link__icon-right", S.value],
+          style: e(l) ? { color: e(l) } : void 0
+        }), null, 16, ["name", "class", "style"])) : i("", !0)
       ]),
       _: 3
-    }, 8, ["class", "to", "href", "disable"]));
+    }, 8, ["class", "to", "href", "disable", "style"]));
   }
-}), P = /* @__PURE__ */ V($, [["__scopeId", "data-v-d51e1628"]]);
+}), A = /* @__PURE__ */ M(O, [["__scopeId", "data-v-49b40e60"]]);
 export {
-  P as default
+  A as default
 };