@bodynarf/react.components 1.14.1 → 1.14.3

package/components/progress/component/style.scss

@@ -1,18 +1,23 @@
-// Bulma variables
-$black: #0a0a0a !default;
-$white: #fff !default;
-$light: #f5f5f5 !default;
-$dark: #363636 !default;
-$primary: #485fc7 !default;
-$link: #485fc7 !default;
-$info: #3e8ed0 !default;
-$success: #48c78e !default;
-$warning: #ffe08a !default;
-$danger: #f14668 !default;
-$text: #4a4a4a !default;
-$background: #f5f5f5 !default;
-$radius: 4px !default;
-$speed: 0.25s !default;
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$black: var(--bulma-black, #0a0a0a);
+$white: var(--bulma-white, #fff);
+$light: var(--bulma-light, #f5f5f5);
+$dark: var(--bulma-dark, #363636);
+$primary: var(--bulma-primary, #00d1b2);
+$link: var(--bulma-link, #485fc7);
+$info: var(--bulma-info, #3e8ed0);
+$success: var(--bulma-success, #48c78e);
+$warning: var(--bulma-warning, #ffe08a);
+$danger: var(--bulma-danger, #f14668);
+$text: var(--bulma-text, #4a4a4a);
+$background: var(--bulma-background, #f5f5f5);
+$radius: var(--bulma-radius, 4px);
+$speed: var(--bulma-speed, 0.25s);
 
 $size-small: 0.75rem !default;
 $size-normal: 1rem !default;

package/components/stepper/component/style.css

@@ -46,13 +46,13 @@
   top: auto;
   bottom: -6px;
   transform: translateX(-50%);
-  border-top: 6px solid hsl(0, 0%, 86%);
+  border-top: 6px solid var(--bulma-grey-lighter, #dbdbdb);
   border-bottom: none;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
 }
 .bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow.is-completed::after {
-  border-top-color: hsl(171, 100%, 41%);
+  border-top-color: var(--bulma-primary, #00d1b2);
   border-left-color: transparent;
 }
 .bbr-stepper.is-vertical.is-small .bbr-stepper-connector {
@@ -95,31 +95,31 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 .bbr-stepper .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(171, 100%, 41%);
-  border: 2px solid hsl(171, 100%, 41%);
-  color: hsl(0, 0%, 100%);
+  background: var(--bulma-primary, #00d1b2);
+  border: 2px solid var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
 }
 .bbr-stepper .bbr-stepper-step.is-completed .bbr-stepper-title {
-  color: hsl(0, 0%, 29%);
+  color: var(--bulma-grey-dark, #4a4a4a);
   font-weight: 500;
 }
 .bbr-stepper .bbr-stepper-step.is-current .bbr-stepper-marker {
-  background: hsl(0, 0%, 100%);
-  border: 2px solid hsl(171, 100%, 41%);
-  color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 4px rgba(0, 209.1, 177.735, 0.2);
+  background: var(--bulma-white, #fff);
+  border: 2px solid var(--bulma-primary, #00d1b2);
+  color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-primary, #00d1b2), 0.2);
 }
 .bbr-stepper .bbr-stepper-step.is-current .bbr-stepper-title {
-  color: hsl(0, 0%, 21%);
+  color: var(--bulma-grey-darker, #363636);
   font-weight: 600;
 }
 .bbr-stepper .bbr-stepper-step.is-upcoming .bbr-stepper-marker {
-  background: hsl(0, 0%, 100%);
-  border: 2px solid hsl(0, 0%, 86%);
-  color: hsl(0, 0%, 48%);
+  background: var(--bulma-white, #fff);
+  border: 2px solid var(--bulma-grey-lighter, #dbdbdb);
+  color: var(--bulma-grey, #7a7a7a);
 }
 .bbr-stepper .bbr-stepper-step.is-upcoming .bbr-stepper-title {
-  color: hsl(0, 0%, 48%);
+  color: var(--bulma-grey, #7a7a7a);
 }
 .bbr-stepper .bbr-stepper-marker {
   display: flex;
@@ -152,7 +152,7 @@
 .bbr-stepper .bbr-stepper-description {
   margin-top: 0.25rem;
   font-size: 0.75rem;
-  color: hsl(0, 0%, 48%);
+  color: var(--bulma-grey, #7a7a7a);
   line-height: 1.25;
 }
 .bbr-stepper .bbr-stepper-connector {
@@ -161,11 +161,11 @@
   left: calc(50% + 1.25rem + 0.25rem);
   right: calc(-50% + 1.25rem + 0.25rem);
   height: 2px;
-  background: hsl(0, 0%, 86%);
+  background: var(--bulma-grey-lighter, #dbdbdb);
   z-index: 0;
 }
 .bbr-stepper .bbr-stepper-connector.is-completed {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .bbr-stepper .bbr-stepper-connector.is-hidden {
   display: none;
@@ -180,11 +180,11 @@
   height: 0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-left: 6px solid hsl(0, 0%, 86%);
+  border-left: 6px solid var(--bulma-grey-lighter, #dbdbdb);
   z-index: 2;
 }
 .bbr-stepper .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(171, 100%, 41%);
+  border-left-color: var(--bulma-primary, #00d1b2);
 }
 .bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow::before {
   right: auto;
@@ -194,16 +194,16 @@
   transform: translateX(-50%);
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 6px solid hsl(0, 0%, 86%);
+  border-top: 6px solid var(--bulma-grey-lighter, #dbdbdb);
   border-bottom: none;
 }
 .bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(171, 100%, 41%);
+  border-top-color: var(--bulma-primary, #00d1b2);
   border-left-color: transparent;
 }
 .bbr-stepper.is-animated .bbr-stepper-connector.is-completed {
   position: relative;
-  background: hsl(0, 0%, 86%);
+  background: var(--bulma-grey-lighter, #dbdbdb);
 }
 .bbr-stepper.is-animated .bbr-stepper-connector.is-completed::after {
   content: "";
@@ -211,7 +211,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
   animation: stepper-connector-fill 0.5s ease forwards;
 }
 .bbr-stepper.is-animated.is-vertical .bbr-stepper-connector.is-completed::after {
@@ -278,233 +278,141 @@
   left: calc(50% + 1.75rem + 0.25rem);
   right: calc(-50% + 1.75rem + 0.25rem);
 }
-.bbr-stepper.is-white .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 100%);
-  color: hsl(0, 0%, 4%);
-}
-.bbr-stepper.is-white .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(0, 0%, 100%);
-  color: hsl(0, 0%, 100%);
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
-}
-.bbr-stepper.is-white .bbr-stepper-connector.is-completed {
-  background: hsl(0, 0%, 100%);
-}
-.bbr-stepper.is-white .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(0, 0%, 100%);
-}
-.bbr-stepper.is-white.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(0, 0%, 100%);
-}
-.bbr-stepper.is-white.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(0, 0%, 100%);
-  border-left-color: transparent;
-}
-.bbr-stepper.is-black .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(0, 0%, 4%);
-  border-color: hsl(0, 0%, 4%);
-  color: hsl(0, 0%, 100%);
-}
-.bbr-stepper.is-black .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(0, 0%, 4%);
-  color: hsl(0, 0%, 4%);
-  box-shadow: 0 0 0 4px rgba(10.2, 10.2, 10.2, 0.2);
-}
-.bbr-stepper.is-black .bbr-stepper-connector.is-completed {
-  background: hsl(0, 0%, 4%);
-}
-.bbr-stepper.is-black .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(0, 0%, 4%);
-}
-.bbr-stepper.is-black.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(0, 0%, 4%);
-}
-.bbr-stepper.is-black.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(0, 0%, 4%);
-  border-left-color: transparent;
-}
-.bbr-stepper.is-light .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(0, 0%, 96%);
-  border-color: hsl(0, 0%, 96%);
-  color: rgba(0, 0, 0, 0.7);
-}
-.bbr-stepper.is-light .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(0, 0%, 96%);
-  color: hsl(0, 0%, 96%);
-  box-shadow: 0 0 0 4px rgba(244.8, 244.8, 244.8, 0.2);
-}
-.bbr-stepper.is-light .bbr-stepper-connector.is-completed {
-  background: hsl(0, 0%, 96%);
-}
-.bbr-stepper.is-light .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(0, 0%, 96%);
-}
-.bbr-stepper.is-light.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(0, 0%, 96%);
-}
-.bbr-stepper.is-light.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(0, 0%, 96%);
-  border-left-color: transparent;
-}
-.bbr-stepper.is-dark .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(0, 0%, 21%);
-  border-color: hsl(0, 0%, 21%);
-  color: #fff;
-}
-.bbr-stepper.is-dark .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(0, 0%, 21%);
-  color: hsl(0, 0%, 21%);
-  box-shadow: 0 0 0 4px rgba(53.55, 53.55, 53.55, 0.2);
-}
-.bbr-stepper.is-dark .bbr-stepper-connector.is-completed {
-  background: hsl(0, 0%, 21%);
-}
-.bbr-stepper.is-dark .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(0, 0%, 21%);
-}
-.bbr-stepper.is-dark.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(0, 0%, 21%);
-}
-.bbr-stepper.is-dark.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(0, 0%, 21%);
-  border-left-color: transparent;
-}
 .bbr-stepper.is-primary .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(171, 100%, 41%);
-  border-color: hsl(171, 100%, 41%);
-  color: #fff;
+  background: var(--bulma-primary, #00d1b2);
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
 }
 .bbr-stepper.is-primary .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(171, 100%, 41%);
-  color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 4px rgba(0, 209.1, 177.735, 0.2);
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-primary, #00d1b2), 0.2);
 }
 .bbr-stepper.is-primary .bbr-stepper-connector.is-completed {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .bbr-stepper.is-primary .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(171, 100%, 41%);
+  border-left-color: var(--bulma-primary, #00d1b2);
 }
 .bbr-stepper.is-primary.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .bbr-stepper.is-primary.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(171, 100%, 41%);
+  border-top-color: var(--bulma-primary, #00d1b2);
   border-left-color: transparent;
 }
 .bbr-stepper.is-link .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(229, 53%, 53%);
-  border-color: hsl(229, 53%, 53%);
-  color: #fff;
+  background: var(--bulma-link, #485fc7);
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-white, #fff);
 }
 .bbr-stepper.is-link .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(229, 53%, 53%);
-  color: hsl(229, 53%, 53%);
-  box-shadow: 0 0 0 4px rgba(71.6295, 94.92035, 198.6705, 0.2);
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-link, #485fc7), 0.2);
 }
 .bbr-stepper.is-link .bbr-stepper-connector.is-completed {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 .bbr-stepper.is-link .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(229, 53%, 53%);
+  border-left-color: var(--bulma-link, #485fc7);
 }
 .bbr-stepper.is-link.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 .bbr-stepper.is-link.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(229, 53%, 53%);
+  border-top-color: var(--bulma-link, #485fc7);
   border-left-color: transparent;
 }
 .bbr-stepper.is-info .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(207, 61%, 53%);
-  border-color: hsl(207, 61%, 53%);
-  color: #fff;
+  background: var(--bulma-info, #3e8ed0);
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-white, #fff);
 }
 .bbr-stepper.is-info .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(207, 61%, 53%);
-  color: hsl(207, 61%, 53%);
-  box-shadow: 0 0 0 4px rgba(62.0415, 142.46085, 208.2585, 0.2);
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-info, #3e8ed0), 0.2);
 }
 .bbr-stepper.is-info .bbr-stepper-connector.is-completed {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 .bbr-stepper.is-info .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(207, 61%, 53%);
+  border-left-color: var(--bulma-info, #3e8ed0);
 }
 .bbr-stepper.is-info.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 .bbr-stepper.is-info.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(207, 61%, 53%);
+  border-top-color: var(--bulma-info, #3e8ed0);
   border-left-color: transparent;
 }
 .bbr-stepper.is-success .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(153, 53%, 53%);
-  border-color: hsl(153, 53%, 53%);
-  color: #fff;
+  background: var(--bulma-success, #48c78e);
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-white, #fff);
 }
 .bbr-stepper.is-success .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(153, 53%, 53%);
-  color: hsl(153, 53%, 53%);
-  box-shadow: 0 0 0 4px rgba(71.6295, 198.6705, 141.50205, 0.2);
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-success, #48c78e), 0.2);
 }
 .bbr-stepper.is-success .bbr-stepper-connector.is-completed {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 .bbr-stepper.is-success .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(153, 53%, 53%);
+  border-left-color: var(--bulma-success, #48c78e);
 }
 .bbr-stepper.is-success.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 .bbr-stepper.is-success.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(153, 53%, 53%);
+  border-top-color: var(--bulma-success, #48c78e);
   border-left-color: transparent;
 }
 .bbr-stepper.is-warning .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(44, 100%, 77%);
-  border-color: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
+  border-color: var(--bulma-warning, #ffe08a);
   color: rgba(0, 0, 0, 0.7);
 }
 .bbr-stepper.is-warning .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(44, 100%, 77%);
-  color: hsl(44, 100%, 77%);
-  box-shadow: 0 0 0 4px rgba(255, 223.72, 137.7, 0.2);
+  border-color: var(--bulma-warning, #ffe08a);
+  color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-warning, #ffe08a), 0.2);
 }
 .bbr-stepper.is-warning .bbr-stepper-connector.is-completed {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 .bbr-stepper.is-warning .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(44, 100%, 77%);
+  border-left-color: var(--bulma-warning, #ffe08a);
 }
 .bbr-stepper.is-warning.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 .bbr-stepper.is-warning.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(44, 100%, 77%);
+  border-top-color: var(--bulma-warning, #ffe08a);
   border-left-color: transparent;
 }
 .bbr-stepper.is-danger .bbr-stepper-step.is-completed .bbr-stepper-marker {
-  background: hsl(348, 86%, 61%);
-  border-color: hsl(348, 86%, 61%);
-  color: #fff;
+  background: var(--bulma-danger, #f14668);
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-white, #fff);
 }
 .bbr-stepper.is-danger .bbr-stepper-step.is-current .bbr-stepper-marker {
-  border-color: hsl(348, 86%, 61%);
-  color: hsl(348, 86%, 61%);
-  box-shadow: 0 0 0 4px rgba(241.077, 70.023, 104.2338, 0.2);
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-danger, #f14668), 0.2);
 }
 .bbr-stepper.is-danger .bbr-stepper-connector.is-completed {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 .bbr-stepper.is-danger .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-left-color: hsl(348, 86%, 61%);
+  border-left-color: var(--bulma-danger, #f14668);
 }
 .bbr-stepper.is-danger.is-animated .bbr-stepper-connector.is-completed::after {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 .bbr-stepper.is-danger.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
-  border-top-color: hsl(348, 86%, 61%);
+  border-top-color: var(--bulma-danger, #f14668);
   border-left-color: transparent;
 }

package/components/stepper/component/style.scss

@@ -1,4 +1,28 @@
-@import "bulma/sass/utilities/derived-variables";
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$grey-dark: var(--bulma-grey-dark, #4a4a4a);
+$grey-darker: var(--bulma-grey-darker, #363636);
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
 
 $stepper-marker-size: 2.5rem !default;
 $stepper-marker-size-small: 2rem !default;
@@ -389,8 +413,8 @@ $stepper-description-color: $grey !default;
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
-        $color-invert: nth($pair, 2);
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
 
         &.is-#{$name} {
             .bbr-stepper-step.is-completed {

package/components/timeline/component/index.js

@@ -30,7 +30,7 @@ const Timeline = ({ items, size = ElementSize.Normal, color = ElementColor.Prima
                 itemColorClass,
                 animated ? `is-animated-${index % 2 === 0 ? "left" : "right"}` : "",
             ]);
-            return (_jsxs("div", { className: itemClassName, children: [showTimestampsSeparate === true && leftAligned === false && item.timestamp !== undefined && (_jsx("div", { className: "bbr-timeline-timestamp is-left", children: item.timestamp })), _jsx("div", { className: "bbr-timeline-marker", children: item.icon !== undefined ? (_jsx("span", { className: "bbr-timeline-icon", children: _jsx("i", { className: `fas ${item.icon}` }) })) : item.marker !== undefined ? (_jsx("span", { className: "bbr-timeline-marker-content", children: item.marker })) : null }), _jsxs("div", { className: "bbr-timeline-content", children: [item.timestamp !== undefined && showTimestampsSeparate === false && (_jsx("div", { className: "bbr-timeline-timestamp", children: item.timestamp })), _jsx("div", { className: "bbr-timeline-title", children: item.title }), item.content !== undefined && item.content !== "" && (_jsx("div", { className: "bbr-timeline-text", children: item.content }))] }), showTimestampsSeparate === true && leftAligned === false && item.timestamp !== undefined && (_jsx("div", { className: "bbr-timeline-timestamp is-right", children: item.timestamp })), showConnectors === true && index < items.length - 1 && (_jsx("div", { className: "bbr-timeline-connector" }))] }, item.id));
+            return (_jsxs("div", { className: itemClassName, children: [showTimestampsSeparate === true && leftAligned === false && item.timestamp !== undefined && (_jsx("div", { className: "bbr-timeline-timestamp is-left", children: item.timestamp })), _jsx("div", { className: `bbr-timeline-marker${item.marker !== undefined && item.icon === undefined ? " has-text-marker" : ""}`, children: item.icon !== undefined ? (_jsx("span", { className: "bbr-timeline-icon", children: _jsx("i", { className: `fas ${item.icon}` }) })) : item.marker !== undefined ? (_jsx("span", { className: "bbr-timeline-marker-content", children: item.marker })) : null }), _jsxs("div", { className: "bbr-timeline-content", children: [item.timestamp !== undefined && showTimestampsSeparate === false && (_jsx("div", { className: "bbr-timeline-timestamp", children: item.timestamp })), _jsx("div", { className: "bbr-timeline-title", children: item.title }), item.content !== undefined && item.content !== "" && (_jsx("div", { className: "bbr-timeline-text", children: item.content }))] }), showTimestampsSeparate === true && leftAligned === false && item.timestamp !== undefined && (_jsx("div", { className: "bbr-timeline-timestamp is-right", children: item.timestamp })), showConnectors === true && index < items.length - 1 && (_jsx("div", { className: "bbr-timeline-connector" }))] }, item.id));
         }) }));
 };
 export default Timeline;