ep-lib-ts 1.0.63 → 1.0.65

package/dist/styles.css

@@ -0,0 +1,655 @@
+
+
+
+  :root {
+    /* neutrals (base -> neutral) */
+    --ep-neutral:           #a1a1aa; /* base.default */
+    --ep-neutral-light:     #d4d4d8; /* base.light  */
+    --ep-neutral-dark:      #8e8eab; /* base.dark   */
+
+    /* primary (+ light/dark) */
+    --ep-primary:           #2196F3;
+    --ep-primary-light:     #67b6ed;
+    --ep-primary-dark:      #0D47A1;
+
+    /* secondary */
+    --ep-secondary:         #FFC107;
+    --ep-secondary-light:   #FFF8E1;
+    --ep-secondary-dark:    #E65100;
+
+    /* error */
+    --ep-error:             #F44336;
+    --ep-error-light:       #FFCDD2;
+    --ep-error-dark:        #B71C1C;
+
+    /* warning */
+    --ep-warning:           #F9A825;
+    --ep-warning-light:     #FFF9C4;
+    --ep-warning-dark:      #F57F17;
+
+    /* success */
+    --ep-success:           #81C784;
+    --ep-success-light:     #E8F5E9;
+    --ep-success-dark:      #1B5E20;
+
+    /* info */
+    --ep-info:              #2196F3;
+    --ep-info-light:        #E3F2FD;
+    --ep-info-dark:         #0D47A1;
+
+    /* question */
+    --ep-question:          #F48FB1;
+    --ep-question-light:    #F8BBD0;
+    --ep-question-dark:     #880E4F;
+
+    /* tip */
+    --ep-tip:               #673AB7;
+    --ep-tip-light:         #D1C4E9;
+    --ep-tip-dark:          #311B92;
+
+    /* surfaces / borders / text */
+    --ep-surface:           #ffffff;
+    --ep-surface-2:         #f8fafc;
+    --ep-text-dark:         #18181b;
+  }
+
+  /* Dark-mode semantic flips */
+  html.dark {
+    --ep-surface:           #18181b;
+    --ep-surface-2:         #1f1f24;
+  }
+
+
+/* --- Helpers used by components (colors only) --- */
+  
+
+  /* Surfaces & text */
+  .ep-surface            { background-color: var(--ep-surface); }
+  .ep-surface-2          { background-color: var(--ep-surface-2); }
+  .ep-border             { border-color:     var(--ep-surface); }
+  .ep-text-dark          {color: var(--ep-text-dark) }
+
+  /* === Neutral === */
+  .ep-bg-neutral         { background-color: var(--ep-neutral); }
+  .ep-bg-neutral-light   { background-color: var(--ep-neutral-light); }
+  .ep-bg-neutral-dark    { background-color: var(--ep-neutral-dark); }
+  .ep-text-neutral       { color:            var(--ep-neutral); }
+  .ep-text-neutral-light { color:            var(--ep-neutral-light); }
+  .ep-text-neutral-dark  { color:            var(--ep-neutral-dark); }
+  .ep-border-neutral     { border-color:     var(--ep-neutral); }
+  .ep-border-neutral-light { border-color:   var(--ep-neutral-light); }
+  .ep-border-neutral-dark  { border-color:   var(--ep-neutral-dark); }
+  .ep-stroke-neutral     { stroke:           var(--ep-neutral); }
+  .ep-stroke-neutral-light { stroke:         var(--ep-neutral-light); }
+  .ep-stroke-neutral-dark  { stroke:         var(--ep-neutral-dark); }
+  .ep-fill-neutral       { fill:             var(--ep-neutral); }
+  .ep-fill-neutral-light { fill:             var(--ep-neutral-light); }
+  .ep-fill-neutral-dark  { fill:             var(--ep-neutral-dark); }
+
+  /* === btn neutral == */
+  .ep-btn-text-neutral { color: #fff;}
+  html.dark .ep-btn-text-neutral { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-neutral:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-neutral:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-neutral-outline { color: #000;}
+  html.dark .ep-btn-text-neutral-outline { color: var(--ep-neutral-light);}
+
+  .ep-hover-btn-text-neutral-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-neutral-outline:hover { color: var(--ep-surface);}
+
+
+  /* === Primary === */
+  .ep-bg-primary         { background-color: var(--ep-primary); }
+  .ep-bg-primary-light   { background-color: var(--ep-primary-light); }
+  .ep-bg-primary-dark    { background-color: var(--ep-primary-dark); }
+  .ep-text-primary       { color:            var(--ep-primary); }
+  .ep-text-primary-light { color:            var(--ep-primary-light); }
+  .ep-text-primary-dark  { color:            var(--ep-primary-dark); }
+  .ep-border-primary     { border-color:     var(--ep-primary); }
+  .ep-border-primary-light { border-color:   var(--ep-primary-light); }
+  .ep-border-primary-dark  { border-color:   var(--ep-primary-dark); }
+  .ep-stroke-primary     { stroke:           var(--ep-primary); }
+  .ep-stroke-primary-light { stroke:         var(--ep-primary-light); }
+  .ep-stroke-primary-dark  { stroke:         var(--ep-primary-dark); }
+  .ep-fill-primary       { fill:             var(--ep-primary); }
+  .ep-fill-primary-light { fill:             var(--ep-primary-light); }
+  .ep-fill-primary-dark  { fill:             var(--ep-primary-dark); }
+
+    /* === btn primary == */
+  .ep-btn-text-primary { color: #fff;}
+  html.dark .ep-btn-text-primary { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-primary:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-primary:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-primary-outline { color: var(--ep-primary);}
+  html.dark .ep-btn-text-primary-outline { color: var(--ep-primary-light);}
+
+  .ep-hover-btn-text-primary-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-primary-outline:hover { color: var(--ep-surface);}
+
+  /* === Secondary === */
+  .ep-bg-secondary         { background-color: var(--ep-secondary); }
+  .ep-bg-secondary-light   { background-color: var(--ep-secondary-light); }
+  .ep-bg-secondary-dark    { background-color: var(--ep-secondary-dark); }
+  .ep-text-secondary       { color:            var(--ep-secondary); }
+  .ep-text-secondary-light { color:            var(--ep-secondary-light); }
+  .ep-text-secondary-dark  { color:            var(--ep-secondary-dark); }
+  .ep-border-secondary     { border-color:     var(--ep-secondary); }
+  .ep-border-secondary-light { border-color:   var(--ep-secondary-light); }
+  .ep-border-secondary-dark  { border-color:   var(--ep-secondary-dark); }
+  .ep-stroke-secondary     { stroke:           var(--ep-secondary); }
+  .ep-stroke-secondary-light { stroke:         var(--ep-secondary-light); }
+  .ep-stroke-secondary-dark  { stroke:         var(--ep-secondary-dark); }
+  .ep-fill-secondary       { fill:             var(--ep-secondary); }
+  .ep-fill-secondary-light { fill:             var(--ep-secondary-light); }
+  .ep-fill-secondary-dark  { fill:             var(--ep-secondary-dark); }
+
+    /* === btn secondary == */
+  .ep-btn-text-secondary { color: #fff;}
+  html.dark .ep-btn-text-secondary { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-secondary:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-secondary:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-secondary-outline { color: var(--ep-secondary);}
+  html.dark .ep-btn-text-secondary-outline { color: var(--ep-secondary-light);}
+
+  .ep-hover-btn-text-secondary-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-secondary-outline:hover { color: var(--ep-surface);}
+
+
+  /* === Error === */
+  .ep-bg-error         { background-color: var(--ep-error); }
+  .ep-bg-error-light   { background-color: var(--ep-error-light); }
+  .ep-bg-error-dark    { background-color: var(--ep-error-dark); }
+  .ep-text-error       { color:            var(--ep-error); }
+  .ep-text-error-light { color:            var(--ep-error-light); }
+  .ep-text-error-dark  { color:            var(--ep-error-dark); }
+  .ep-border-error     { border-color:     var(--ep-error); }
+  .ep-border-error-light { border-color:   var(--ep-error-light); }
+  .ep-border-error-dark  { border-color:   var(--ep-error-dark); }
+  .ep-stroke-error     { stroke:           var(--ep-error); }
+  .ep-stroke-error-light { stroke:         var(--ep-error-light); }
+  .ep-stroke-error-dark  { stroke:         var(--ep-error-dark); }
+  .ep-fill-error       { fill:             var(--ep-error); }
+  .ep-fill-error-light { fill:             var(--ep-error-light); }
+  .ep-fill-error-dark  { fill:             var(--ep-error-dark); }
+
+      /* === btn error == */
+  .ep-btn-text-error { color: #fff;}
+  html.dark .ep-btn-text-error { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-error:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-error:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-error-outline { color: var(--ep-error);}
+  html.dark .ep-btn-text-error-outline { color: var(--ep-error-light);}
+
+  .ep-hover-btn-text-error-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-error-outline:hover { color: var(--ep-surface);}
+
+  /* === Warning === */
+  .ep-bg-warning         { background-color: var(--ep-warning); }
+  .ep-bg-warning-light   { background-color: var(--ep-warning-light); }
+  .ep-bg-warning-dark    { background-color: var(--ep-warning-dark); }
+  .ep-text-warning       { color:            var(--ep-warning); }
+  .ep-text-warning-light { color:            var(--ep-warning-light); }
+  .ep-text-warning-dark  { color:            var(--ep-warning-dark); }
+  .ep-border-warning     { border-color:     var(--ep-warning); }
+  .ep-border-warning-light { border-color:   var(--ep-warning-light); }
+  .ep-border-warning-dark  { border-color:   var(--ep-warning-dark); }
+  .ep-stroke-warning     { stroke:           var(--ep-warning); }
+  .ep-stroke-warning-light { stroke:         var(--ep-warning-light); }
+  .ep-stroke-warning-dark  { stroke:         var(--ep-warning-dark); }
+  .ep-fill-warning       { fill:             var(--ep-warning); }
+  .ep-fill-warning-light { fill:             var(--ep-warning-light); }
+  .ep-fill-warning-dark  { fill:             var(--ep-warning-dark); }
+
+  /* === btn warning == */
+  .ep-btn-text-warning { color: #fff;}
+  html.dark .ep-btn-text-warning { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-warning:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-warning:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-warning-outline { color: var(--ep-warning);}
+  html.dark .ep-btn-text-warning-outline { color: var(--ep-warning-light);}
+
+  .ep-hover-btn-text-warning-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-warning-outline:hover { color: var(--ep-surface);}
+
+  /* === Success === */
+  .ep-bg-success         { background-color: var(--ep-success); }
+  .ep-bg-success-light   { background-color: var(--ep-success-light); }
+  .ep-bg-success-dark    { background-color: var(--ep-success-dark); }
+  .ep-text-success       { color:            var(--ep-success); }
+  .ep-text-success-light { color:            var(--ep-success-light); }
+  .ep-text-success-dark  { color:            var(--ep-success-dark); }
+  .ep-border-success     { border-color:     var(--ep-success); }
+  .ep-border-success-light { border-color:   var(--ep-success-light); }
+  .ep-border-success-dark  { border-color:   var(--ep-success-dark); }
+  .ep-stroke-success     { stroke:           var(--ep-success); }
+  .ep-stroke-success-light { stroke:         var(--ep-success-light); }
+  .ep-stroke-success-dark  { stroke:         var(--ep-success-dark); }
+  .ep-fill-success       { fill:             var(--ep-success); }
+  .ep-fill-success-light { fill:             var(--ep-success-light); }
+  .ep-fill-success-dark  { fill:             var(--ep-success-dark); }
+
+
+  /* === btn success == */
+  .ep-btn-text-success { color: #fff;}
+  html.dark .ep-btn-text-success { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-success:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-success:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-success-outline { color: var(--ep-success)}
+  html.dark .ep-btn-text-success-outline { color: var(--ep-success-light);}
+
+  .ep-hover-btn-text-success-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-success-outline:hover { color: var(--ep-surface);}
+
+  /* === Info === */
+  .ep-bg-info         { background-color: var(--ep-info); }
+  .ep-bg-info-light   { background-color: var(--ep-info-light); }
+  .ep-bg-info-dark    { background-color: var(--ep-info-dark); }
+  .ep-text-info       { color:            var(--ep-info); }
+  .ep-text-info-light { color:            var(--ep-info-light); }
+  .ep-text-info-dark  { color:            var(--ep-info-dark); }
+  .ep-border-info     { border-color:     var(--ep-info); }
+  .ep-border-info-light { border-color:   var(--ep-info-light); }
+  .ep-border-info-dark  { border-color:   var(--ep-info-dark); }
+  .ep-stroke-info     { stroke:           var(--ep-info); }
+  .ep-stroke-info-light { stroke:         var(--ep-info-light); }
+  .ep-stroke-info-dark  { stroke:         var(--ep-info-dark); }
+  .ep-fill-info       { fill:             var(--ep-info); }
+  .ep-fill-info-light { fill:             var(--ep-info-light); }
+  .ep-fill-info-dark  { fill:             var(--ep-info-dark); }
+
+  /* === btn info == */
+  .ep-btn-text-info { color: #fff;}
+  html.dark .ep-btn-text-info { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-info:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-info:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-info-outline { color: var(--ep-info)}
+  html.dark .ep-btn-text-info-outline { color: var(--ep-info-light);}
+
+  .ep-hover-btn-text-info-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-info-outline:hover { color: var(--ep-surface);}
+
+  /* === Question === */
+  .ep-bg-question         { background-color: var(--ep-question); }
+  .ep-bg-question-light   { background-color: var(--ep-question-light); }
+  .ep-bg-question-dark    { background-color: var(--ep-question-dark); }
+  .ep-text-question       { color:            var(--ep-question); }
+  .ep-text-question-light { color:            var(--ep-question-light); }
+  .ep-text-question-dark  { color:            var(--ep-question-dark); }
+  .ep-border-question     { border-color:     var(--ep-question); }
+  .ep-border-question-light { border-color:   var(--ep-question-light); }
+  .ep-border-question-dark  { border-color:   var(--ep-question-dark); }
+  .ep-stroke-question     { stroke:           var(--ep-question); }
+  .ep-stroke-question-light { stroke:         var(--ep-question-light); }
+  .ep-stroke-question-dark  { stroke:         var(--ep-question-dark); }
+  .ep-fill-question       { fill:             var(--ep-question); }
+  .ep-fill-question-light { fill:             var(--ep-question-light); }
+  .ep-fill-question-dark  { fill:             var(--ep-question-dark); }
+
+   /* === btn question == */
+  .ep-btn-text-question { color: #fff;}
+  html.dark .ep-btn-text-question { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-question:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-question:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-question-outline { color: var(--ep-question)}
+  html.dark .ep-btn-text-question-outline { color: var(--ep-question-light);}
+
+  .ep-hover-btn-text-question-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-question-outline:hover { color: var(--ep-surface);}
+
+  /* === Tip === */
+  .ep-bg-tip         { background-color: var(--ep-tip); }
+  .ep-bg-tip-light   { background-color: var(--ep-tip-light); }
+  .ep-bg-tip-dark    { background-color: var(--ep-tip-dark); }
+  .ep-text-tip       { color:            var(--ep-tip); }
+  .ep-text-tip-light { color:            var(--ep-tip-light); }
+  .ep-text-tip-dark  { color:            var(--ep-tip-dark); }
+  .ep-border-tip     { border-color:     var(--ep-tip); }
+  .ep-border-tip-light { border-color:   var(--ep-tip-light); }
+  .ep-border-tip-dark  { border-color:   var(--ep-tip-dark); }
+  .ep-stroke-tip     { stroke:           var(--ep-tip); }
+  .ep-stroke-tip-light { stroke:         var(--ep-tip-light); }
+  .ep-stroke-tip-dark  { stroke:         var(--ep-tip-dark); }
+  .ep-fill-tip       { fill:             var(--ep-tip); }
+  .ep-fill-tip-light { fill:             var(--ep-tip-light); }
+  .ep-fill-tip-dark  { fill:             var(--ep-tip-dark); }
+
+   /* === btn tip == */
+  .ep-btn-text-tip { color: #fff;}
+  html.dark .ep-btn-text-tip { color: var(--ep-surface);}
+
+  .ep-hover-btn-text-tip:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-tip:hover { color: var(--ep-surface);}
+
+  .ep-btn-text-tip-outline { color: var(--ep-tip)}
+  html.dark .ep-btn-text-tip-outline { color: var(--ep-tip-light);}
+
+  .ep-hover-btn-text-tip-outline:hover { color: #fff;}
+  html.dark .ep-hover-btn-text-tip-outline:hover { color: var(--ep-surface);}
+  
+
+  .ep-ring { --tw-ring-color: var(--ep-primary); }
+
+  /* Ring color helpers */
+  .ep-ring-neutral         { --tw-ring-color: var(--ep-neutral); }
+  .ep-ring-neutral-light   { --tw-ring-color: var(--ep-neutral-light); }
+  .ep-ring-neutral-dark    { --tw-ring-color: var(--ep-neutral-dark); }
+
+  .ep-ring-primary         { --tw-ring-color: var(--ep-primary); }
+  .ep-ring-primary-light   { --tw-ring-color: var(--ep-primary-light); }
+  .ep-ring-primary-dark    { --tw-ring-color: var(--ep-primary-dark); }
+
+  .ep-ring-secondary       { --tw-ring-color: var(--ep-secondary); }
+  .ep-ring-secondary-light { --tw-ring-color: var(--ep-secondary-light); }
+  .ep-ring-secondary-dark  { --tw-ring-color: var(--ep-secondary-dark); }
+
+  .ep-ring-error           { --tw-ring-color: var(--ep-error); }
+  .ep-ring-error-light     { --tw-ring-color: var(--ep-error-light); }
+  .ep-ring-error-dark      { --tw-ring-color: var(--ep-error-dark); }
+
+  .ep-ring-warning         { --tw-ring-color: var(--ep-warning); }
+  .ep-ring-warning-light   { --tw-ring-color: var(--ep-warning-light); }
+  .ep-ring-warning-dark    { --tw-ring-color: var(--ep-warning-dark); }
+
+  .ep-ring-success         { --tw-ring-color: var(--ep-success); }
+  .ep-ring-success-light   { --tw-ring-color: var(--ep-success-light); }
+  .ep-ring-success-dark    { --tw-ring-color: var(--ep-success-dark); }
+
+  .ep-ring-info            { --tw-ring-color: var(--ep-info); }
+  .ep-ring-info-light      { --tw-ring-color: var(--ep-info-light); }
+  .ep-ring-info-dark       { --tw-ring-color: var(--ep-info-dark); }
+
+  .ep-ring-question        { --tw-ring-color: var(--ep-question); }
+  .ep-ring-question-light  { --tw-ring-color: var(--ep-question-light); }
+  .ep-ring-question-dark   { --tw-ring-color: var(--ep-question-dark); }
+
+  .ep-ring-tip             { --tw-ring-color: var(--ep-tip); }
+  .ep-ring-tip-light       { --tw-ring-color: var(--ep-tip-light); }
+  .ep-ring-tip-dark        { --tw-ring-color: var(--ep-tip-dark); }
+
+  /* Ring offset color helpers (optional) */
+  .ep-ring-offset-surface  { --tw-ring-offset-color: var(--ep-surface); }
+  .ep-ring-offset-neutral  { --tw-ring-offset-color: var(--ep-neutral); }
+  .ep-ring-offset-primary  { --tw-ring-offset-color: var(--ep-primary); }
+  .ep-ring-offset-secondary{ --tw-ring-offset-color: var(--ep-secondary); }
+  .ep-ring-offset-error    { --tw-ring-offset-color: var(--ep-error); }
+  .ep-ring-offset-warning  { --tw-ring-offset-color: var(--ep-warning); }
+  .ep-ring-offset-success  { --tw-ring-offset-color: var(--ep-success); }
+  .ep-ring-offset-info     { --tw-ring-offset-color: var(--ep-info); }
+  .ep-ring-offset-question { --tw-ring-offset-color: var(--ep-question); }
+  .ep-ring-offset-tip      { --tw-ring-offset-color: var(--ep-tip); }
+
+  .ep-hover-bg-neutral:hover    { background-color: var(--ep-neutral-dark); }
+  html.dark .ep-hover-bg-neutral:hover { background-color: var(--ep-neutral-light); }
+
+  .ep-hover-bg-primary:hover    { background-color: var(--ep-primary-dark); }
+  html.dark .ep-hover-bg-primary:hover { background-color: var(--ep-primary-light); }
+
+  .ep-hover-bg-secondary:hover  { background-color: var(--ep-secondary-dark); }
+  html.dark .ep-hover-bg-secondary:hover { background-color: var(--ep-secondary-light); }
+
+  .ep-hover-bg-error:hover      { background-color: var(--ep-error-dark); }
+  html.dark .ep-hover-bg-error:hover { background-color: var(--ep-error-light); }
+
+  .ep-hover-bg-warning:hover    { background-color: var(--ep-warning-dark); }
+  html.dark .ep-hover-bg-warning:hover { background-color: var(--ep-warning-light); }
+
+  .ep-hover-bg-success:hover    { background-color: var(--ep-success-dark); }
+  html.dark .ep-hover-bg-success:hover { background-color: var(--ep-success-light); }
+
+  .ep-hover-bg-info:hover       { background-color: var(--ep-info-dark); }
+  html.dark .ep-hover-bg-info:hover { background-color: var(--ep-info-light); }
+
+  .ep-hover-bg-question:hover   { background-color: var(--ep-question-dark); }
+  html.dark .ep-hover-bg-question:hover { background-color: var(--ep-question-light); }
+
+  .ep-hover-bg-tip:hover        { background-color: var(--ep-tip-dark); }
+  html.dark .ep-hover-bg-tip:hover { background-color: var(--ep-tip-light); }
+
+  /* === HOVER: border === */
+  .ep-hover-border-neutral:hover    { border-color: var(--ep-neutral-dark); }
+  html.dark .ep-hover-border-neutral:hover { border-color: var(--ep-neutral); }
+
+  .ep-hover-border-primary:hover    { border-color: var(--ep-primary-dark); }
+  html.dark .ep-hover-border-primary:hover { border-color: var(--ep-primary); }
+
+  .ep-hover-border-secondary:hover  { border-color: var(--ep-secondary-dark); }
+  html.dark .ep-hover-border-secondary:hover { border-color: var(--ep-secondary); }
+
+  .ep-hover-border-error:hover      { border-color: var(--ep-error-dark); }
+  html.dark .ep-hover-border-error:hover { border-color: var(--ep-error); }
+
+  .ep-hover-border-warning:hover    { border-color: var(--ep-warning-dark); }
+  html.dark .ep-hover-border-warning:hover { border-color: var(--ep-warning); }
+
+  .ep-hover-border-success:hover    { border-color: var(--ep-success-dark); }
+  html.dark .ep-hover-border-success:hover { border-color: var(--ep-success); }
+
+  .ep-hover-border-info:hover       { border-color: var(--ep-info-dark); }
+  html.dark .ep-hover-border-info:hover { border-color: var(--ep-info); }
+
+  .ep-hover-border-question:hover   { border-color: var(--ep-question-dark); }
+  html.dark .ep-hover-border-question:hover { border-color: var(--ep-question); }
+
+  .ep-hover-border-tip:hover        { border-color: var(--ep-tip-dark); }
+  html.dark .ep-hover-border-tip:hover { border-color: var(--ep-tip); }
+
+  /* === HOVER: stroke === */
+  .ep-hover-stroke-neutral:hover    { stroke: var(--ep-neutral-dark); }
+  html.dark .ep-hover-stroke-neutral:hover { stroke: var(--ep-neutral-light); }
+
+  .ep-hover-stroke-primary:hover    { stroke: var(--ep-primary-dark); }
+  html.dark .ep-hover-stroke-primary:hover { stroke: var(--ep-primary-light); }
+
+  .ep-hover-stroke-secondary:hover  { stroke: var(--ep-secondary-dark); }
+  html.dark .ep-hover-stroke-secondary:hover { stroke: var(--ep-secondary-light); }
+
+  .ep-hover-stroke-error:hover      { stroke: var(--ep-error-dark); }
+  html.dark .ep-hover-stroke-error:hover { stroke: var(--ep-error-light); }
+
+  .ep-hover-stroke-warning:hover    { stroke: var(--ep-warning-dark); }
+  html.dark .ep-hover-stroke-warning:hover { stroke: var(--ep-warning-light); }
+
+  .ep-hover-stroke-success:hover    { stroke: var(--ep-success-dark); }
+  html.dark .ep-hover-stroke-success:hover { stroke: var(--ep-success-light); }
+
+  .ep-hover-stroke-info:hover       { stroke: var(--ep-info-dark); }
+  html.dark .ep-hover-stroke-info:hover { stroke: var(--ep-info-light); }
+
+  .ep-hover-stroke-question:hover   { stroke: var(--ep-question-dark); }
+  html.dark .ep-hover-stroke-question:hover { stroke: var(--ep-question-light); }
+
+  .ep-hover-stroke-tip:hover        { stroke: var(--ep-tip-dark); }
+  html.dark .ep-hover-stroke-tip:hover { stroke: var(--ep-tip-light); }
+
+  /* === HOVER: fill === */
+  .ep-hover-fill-neutral:hover    { fill: var(--ep-neutral-dark); }
+  html.dark .ep-hover-fill-neutral:hover { fill: var(--ep-neutral-light); }
+
+  .ep-hover-fill-primary:hover    { fill: var(--ep-primary-dark); }
+  html.dark .ep-hover-fill-primary:hover { fill: var(--ep-primary-light); }
+
+  .ep-hover-fill-secondary:hover  { fill: var(--ep-secondary-dark); }
+  html.dark .ep-hover-fill-secondary:hover { fill: var(--ep-secondary-light); }
+
+  .ep-hover-fill-error:hover      { fill: var(--ep-error-dark); }
+  html.dark .ep-hover-fill-error:hover { fill: var(--ep-error-light); }
+
+  .ep-hover-fill-warning:hover    { fill: var(--ep-warning-dark); }
+  html.dark .ep-hover-fill-warning:hover { fill: var(--ep-warning-light); }
+
+  .ep-hover-fill-success:hover    { fill: var(--ep-success-dark); }
+  html.dark .ep-hover-fill-success:hover { fill: var(--ep-success-light); }
+
+  .ep-hover-fill-info:hover       { fill: var(--ep-info-dark); }
+  html.dark .ep-hover-fill-info:hover { fill: var(--ep-info-light); }
+
+  .ep-hover-fill-question:hover   { fill: var(--ep-question-dark); }
+  html.dark .ep-hover-fill-question:hover { fill: var(--ep-question-light); }
+
+  .ep-hover-fill-tip:hover        { fill: var(--ep-tip-dark); }
+  html.dark .ep-hover-fill-tip:hover { fill: var(--ep-tip-light); }
+
+
+
+.ep-tree-wrapper[data-v-819ce9ba] {
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+.ep-tree-container[data-v-819ce9ba] {
+  width: 100%;
+  overflow-x: auto;
+}
+/*$vite$:1*/
+
+.katex[data-v-a9b6227c] {
+  font-size: 1.6em;
+}
+/*$vite$:1*/
+
+.eptimeline-list-enter-active[data-v-6ad2fc60],
+.eptimeline-list-leave-active[data-v-6ad2fc60] {
+  transition: all 0.5s ease;
+}
+.eptimeline-list-enter-from[data-v-6ad2fc60],
+.eptimeline-list-leave-to[data-v-6ad2fc60] {
+  opacity: 0;
+  transform: translateX(30px);
+}
+/*$vite$:1*/
+
+.ep-modal-mask {
+  position: fixed;
+  z-index: 6998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: opacity 0.3s ease;
+}
+.ep-modal-container {
+  margin: auto;
+  max-height: 95%;
+  transition: all 0.3s ease;
+  z-index: 7000;
+}
+.ep-modal-header h3 {
+  margin-top: 0;
+  color: #42b983;
+}
+.ep-modal-body {
+  margin: 20px 0;
+}
+.ep-modal-default-button {
+  float: right;
+}
+.ep-modal-enter-from {
+  opacity: 0;
+}
+.ep-modal-leave-to {
+  opacity: 0;
+}
+.ep-modal-enter-from .ep-modal-container,
+.ep-modal-leave-to .ep-modal-container {
+  transform: scale(1.1);
+}
+/*$vite$:1*/
+
+.ep-accordeon-content[data-v-e4ec841e] {
+  max-height: 0;
+  overflow: hidden;
+}
+/*$vite$:1*/
+
+.ep-info-box[data-v-a9effecb] a {
+  text-decoration: underline;
+  font-weight: 500;
+}
+/*$vite$:1*/
+
+.shape[data-v-4a99873e] {
+  height: var(--e4ec2c0a);
+  width: var(--3f346a72);
+}
+/*$vite$:1*/
+
+pre {
+  white-space: break-spaces;
+}
+/*$vite$:1*/
+
+@keyframes fade-c85132a3 {
+0% {
+    opacity: 0;
+}
+100% {
+    opacity: 1;
+}
+}
+@keyframes scale-c85132a3 {
+0% {
+    transform: scale(0.5);
+    opacity: 0;
+}
+100% {
+    transform: scale(1);
+    opacity: 1;
+}
+}
+@keyframes slideY-c85132a3 {
+0% {
+    transform: translateY(-100%);
+    opacity: 0;
+}
+100% {
+    transform: translateY(0);
+    opacity: 1;
+}
+}
+
+/* Transition animation */
+.fade[data-v-c85132a3] {
+  animation: fade-c85132a3 1s;
+}
+.scale[data-v-c85132a3] {
+  animation: scale-c85132a3 1s;
+}
+.slideY[data-v-c85132a3] {
+  animation: slideY-c85132a3 1s;
+}
+/*$vite$:1*/
+
+.ep-content-timeline-item[data-v-7198a990] {
+  max-height: 0;
+  overflow: hidden;
+}
+/*$vite$:1*/
+
+.ep-display-box[data-v-4e1d2bd1] {
+  z-index: 9999;
+  position: absolute;
+  right: 12rem;
+}
+/*$vite$:1*/
+
+.ep-sensible-content[data-v-b3ee44a0] {
+  position: relative;
+}
+/*$vite$:1*/

package/dist/types/Accordeon.d.ts

@@ -1,5 +1,5 @@
 export declare const typeAccordeon: {
-    base: {
+    neutral: {
         default: string;
         outlined: string;
     };
@@ -11,10 +11,6 @@ export declare const typeAccordeon: {
         default: string;
         outlined: string;
     };
-    accent: {
-        default: string;
-        outlined: string;
-    };
     warning: {
         default: string;
         outlined: string;