@entur/travel 6.3.14-beta.9 → 6.3.15

package/dist/LegBone.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import './LegBone.scss';
+import { default as React } from 'react';
 export type LegBoneProps = {
     /** Retning på komponenten */
     direction: 'horizontal' | 'vertical';

package/dist/LegLine.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import './LegLine.scss';
+import { default as React } from 'react';
 export type LegLineProps = {
     /** Farge på  LegLine'n */
     color: string;

package/dist/TravelHeader.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import './TravelHeader.scss';
+import { default as React } from 'react';
 export type TravelHeaderProps = {
     /** HTML-elementet eller React-komponenten som lager elementet
      * @default 'div'

package/dist/TravelLeg.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { Transport } from './utils';
+import { default as React } from 'react';
+import { Transport } from './utils';
 export type TravelLegProps = {
     /** Ekstra klassenavn */
     className?: string;

package/dist/TravelSwitch.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { Transport } from './utils';
+import { default as React } from 'react';
+import { Transport } from './utils';
 export type TravelSwitchProps = {
     /** Ekstra klassenavn */
     className?: string;

package/dist/TravelTag.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import type { Transport } from './utils';
-import './TravelTag.scss';
+import { default as React } from 'react';
+import { Transport } from './utils';
 export type TravelTagProps = {
     /** Callback som kalles for når man skal lukke TravelTag-en
      * @default undefined

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from './TravelHeader';
 export * from './TravelTag';
 export * from './LegLine';

package/dist/styles.css

@@ -1,249 +1,5 @@
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-travel-header {
-  color: var(--components-travel-travelheader-standard-text);
-  display: flex;
-  flex-direction: column;
-  font-weight: 600;
-  line-height: 1.5;
-  max-width: 100%;
-}
-.eds-contrast .eds-travel-header {
-  color: var(--components-travel-travelheader-contrast-text);
-}
-.eds-travel-header--large {
-  font-size: 1.5rem;
-}
-.eds-travel-header--medium {
-  font-size: 1rem;
-}
-.eds-travel-header--no-wrap {
-  flex-direction: row;
-}
-.eds-travel-header__from, .eds-travel-header__to {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.eds-travel-header--no-wrap .eds-travel-header__from {
-  margin-right: 0.5em;
-}
-.eds-travel-header__to {
-  padding-left: 1.8333333333em;
-  position: relative;
-}
-.eds-travel-header__to::before {
-  background-color: var(--components-travel-travelheader-standard-stroke-line);
-  content: "";
-  display: block;
-  height: 0.1666666667em;
-  left: 0;
-  position: absolute;
-  top: 0.65em;
-  width: 1.3333333333em;
-}
-.eds-contrast .eds-travel-header__to::before {
-  background-color: var(--components-travel-travelheader-contrast-stroke-line);
-}
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-travel-tag {
-  --background-color: var(--components-travel-traveltag-standard-tagfill-walk);
-  --text-color: var(--components-travel-traveltag-standard-text-line);
-  display: inline-flex;
-  position: relative;
-  padding: 0.25rem 0.5rem;
-  height: 2rem;
-  min-width: 2rem;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-.eds-contrast .eds-travel-tag {
-  --background-color: var(--components-travel-traveltag-contrast-tagfill-walk);
-  --text-color: var(--components-travel-traveltag-contrast-text-line);
-}
-.eds-travel-tag--alert {
-  padding-right: 0.75rem;
-}
-.eds-travel-tag--alert--error {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-.eds-contrast .eds-travel-tag--alert--error.eds-travel-tag {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-.eds-travel-tag--icon-and-text > .eds-icon {
-  margin-right: 0.5rem;
-}
-.eds-travel-tag > .eds-icon {
-  font-size: 1.5rem;
-  color: var(--text-color);
-}
-.eds-travel-tag__alert {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  height: 1.125rem;
-  width: 1.125rem;
-  position: absolute;
-  top: 0.4375rem;
-  right: -0.6875rem;
-  background: var(--components-form-feedbacktext-information-standard-stroke);
-}
-.eds-contrast .eds-travel-tag__alert {
-  background: var(--components-form-feedbacktext-information-contrast-stroke);
-}
-.eds-travel-tag__alert-exclamation-icon {
-  color: var(--components-form-feedbacktext-warning-standard-icon-fill);
-}
-.eds-travel-tag__alert-exclamation-icon .svg-validation-circlefilled-exclamation {
-  fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
-}
-.eds-contrast .eds-travel-tag__alert-exclamation-icon {
-  color: var(--components-form-feedbacktext-warning-contrast-icon);
-}
-.eds-travel-tag__alert-error-icon {
-  font-size: 0.875rem;
-  color: var(--components-form-feedbacktext-negative-standard-icon-fill);
-}
-.eds-contrast .eds-travel-tag__alert-error-icon {
-  color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
-}
-.eds-travel-tag__alert-info-icon {
-  color: var(--components-form-feedbacktext-information-standard-icon-fill);
-}
-.eds-contrast .eds-travel-tag__alert-info-icon {
-  color: var(--components-form-feedbacktext-information-contrast-icon-fill);
-}
-.eds-travel-tag__wrapper {
-  display: inline-flex;
-}
-.eds-travel-tag__wrapper--label-position-right {
-  flex-direction: row;
-  align-items: center;
-}
-.eds-travel-tag__wrapper--label-position-bottom {
-  flex-direction: column;
-  align-items: flex-start;
-}
-.eds-travel-tag__label {
-  color: var(--components-travel-traveltag-standard-text-label);
-  font-size: 1rem;
-}
-.eds-contrast .eds-travel-tag__label {
-  color: var(--components-travel-traveltag-contrast-text-label);
-}
-.eds-travel-tag__label--right {
-  margin-left: 0.5rem;
-}
-.eds-travel-tag__label--right--with-alert {
-  margin-left: 1rem;
-}
-.eds-travel-tag__label--bottom {
-  margin-top: 0.125rem;
-  font-size: 0.875rem;
-}
-.eds-travel-tag__close-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  margin: 0 0 0 0.75rem;
-  padding: 0;
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.eds-travel-tag__close-button .eds-icon {
-  color: var(--text-color);
-  font-size: 0.875rem;
-}
-.eds-travel-tag__close-button:has(:focus-visible) {
-  outline-offset: 0.125rem;
-  outline: 2px solid #ffffff;
-}
-.eds-leg-line {
-  flex-grow: 1;
-  mask-image: url("./pattern/line.svg");
-  mask-position: center;
-  -webkit-mask-image: url("./pattern/line.svg");
-  -webkit-mask-position: center;
-}
-.eds-leg-line--dotted {
-  mask-image: url("./pattern/dotted.svg");
-  -webkit-mask-image: url("./pattern/dotted.svg");
-}
-.eds-leg-line--vertical {
-  mask-repeat: repeat-y;
-  width: 1rem;
-  -webkit-mask-repeat: repeat-y;
-}
-.eds-leg-line--vertical.eds-leg-line--dashed {
-  mask-image: url("./pattern/dashed-vertical.svg");
-  -webkit-mask-image: url("./pattern/dashed-vertical.svg");
-}
-.eds-leg-line--vertical.eds-leg-line--wave {
-  mask-image: url("./pattern/wave-vertical.svg");
-  -webkit-mask-image: url("./pattern/wave-vertical.svg");
-}
-.eds-leg-line--horizontal {
-  height: 1rem;
-  mask-repeat: repeat-x;
-  min-width: 6.25rem;
-  -webkit-mask-repeat: repeat-x;
-}
-.eds-leg-line--horizontal.eds-leg-line--dashed {
-  mask-image: url("./pattern/dashed-horizontal.svg");
-  -webkit-mask-image: url("./pattern/dashed-horizontal.svg");
-}
-.eds-leg-line--horizontal.eds-leg-line--wave {
-  mask-image: url("./pattern/wave-horizontal.svg");
-  -webkit-mask-image: url("./pattern/wave-horizontal.svg");
-}
-.eds-leg-bone {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-.eds-leg-bone__start, .eds-leg-bone__stop {
-  border-radius: 50%;
-  height: 1rem;
-  width: 1rem;
-}
-.eds-leg-bone__line {
-  flex-grow: 1;
-}
-.eds-leg-bone--vertical {
-  flex-direction: column;
-  width: 1rem;
-}
-.eds-leg-bone--vertical .eds-leg-bone__start {
-  margin-bottom: 0.125rem;
-}
-.eds-leg-bone--vertical .eds-leg-bone__stop {
-  margin-top: 0.125rem;
-}
-.eds-leg-bone--horizontal {
-  flex-direction: row;
-  height: 1rem;
-}
-.eds-leg-bone--horizontal .eds-leg-bone__start {
-  margin-right: 0.125rem;
-}
-.eds-leg-bone--horizontal .eds-leg-bone__stop {
-  margin-left: 0.125rem;
-}
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
@@ -991,99 +747,337 @@
 :root {
   --contrast-bicycle: #00db9b;
   --contrast-bus: #ff6392;
-  --contrast-bus-transparent: rgba(255,99,146,0.14902);
+  --contrast-bus-transparent: #ff639226;
   --contrast-cableway: #b482fb;
-  --contrast-cableway-transparent: rgba(180,130,251,0.14902);
+  --contrast-cableway-transparent: #b482fb26;
   --contrast-carferry: #6fdfff;
-  --contrast-carferry-transparent: rgba(111,223,255,0.14902);
+  --contrast-carferry-transparent: #6fdfff26;
   --contrast-citybike: #00db9b;
   --contrast-ferry: #6fdfff;
-  --contrast-ferry-transparent: rgba(111,223,255,0.14902);
+  --contrast-ferry-transparent: #6fdfff26;
   --contrast-funicular: #b482fb;
-  --contrast-funicular-transparent: rgba(180,130,251,0.14902);
+  --contrast-funicular-transparent: #b482fb26;
   --contrast-helicopter: #fbafea;
-  --contrast-helicopter-transparent: rgba(251,175,234,0.14902);
+  --contrast-helicopter-transparent: #fbafea26;
   --contrast-metro: #f08901;
-  --contrast-metro-transparent: rgba(240,137,1,0.14902);
+  --contrast-metro-transparent: #f0890126;
   --contrast-mobility: #00db9b;
   --contrast-neutral: #ffffff;
   --contrast-plane: #fbafea;
-  --contrast-plane-transparent: rgba(251,175,234,0.14902);
+  --contrast-plane-transparent: #fbafea26;
   --contrast-taxi: #ffe082;
-  --contrast-taxi-transparent: rgba(255,224,130,0.14902);
+  --contrast-taxi-transparent: #ffe08226;
   --contrast-train: #42a5f5;
-  --contrast-train-transparent: rgba(66,165,245,0.14902);
+  --contrast-train-transparent: #42a5f526;
   --contrast-tram: #b482fb;
-  --contrast-tram-transparent: rgba(180,130,251,0.14902);
+  --contrast-tram-transparent: #b482fb26;
   --contrast-walk: #8284ab;
   --contrast-airportlinkbus: #fbafea;
-  --contrast-airportlinkbus-transparent: rgba(251,175,234,0.14902);
+  --contrast-airportlinkbus-transparent: #fbafea26;
   --contrast-airportlinkrail: #fbafea;
-  --contrast-airportlinkrail-transparent: rgba(251,175,234,0.14902);
+  --contrast-airportlinkrail-transparent: #fbafea26;
   --dark-bicycle: #4db295;
   --dark-bus: #ef7398;
-  --dark-bus-transparent: rgba(239,115,152,0.14902);
+  --dark-bus-transparent: #ef739826;
   --dark-cableway: #b898e5;
-  --dark-cableway-transparent: rgba(184,152,229,0.14902);
+  --dark-cableway-transparent: #b898e526;
   --dark-carferry: #8ccfe2;
-  --dark-carferry-transparent: rgba(140,207,226,0.14902);
+  --dark-carferry-transparent: #8ccfe226;
   --dark-citybike: #4db295;
   --dark-ferry: #8ccfe2;
-  --dark-ferry-transparent: rgba(140,207,226,0.14902);
+  --dark-ferry-transparent: #8ccfe226;
   --dark-funicular: #b898e5;
-  --dark-funicular-transparent: rgba(184,152,229,0.14902);
+  --dark-funicular-transparent: #b898e526;
   --dark-helicopter: #f2b8e5;
-  --dark-helicopter-transparent: rgba(242,184,229,0.14902);
+  --dark-helicopter-transparent: #f2b8e526;
   --dark-metro: #dd973c;
-  --dark-metro-transparent: rgba(221,151,60,0.14902);
+  --dark-metro-transparent: #dd973c26;
   --dark-mobility: #4db295;
   --dark-neutral: #e5e5e9;
   --dark-plane: #f2b8e5;
-  --dark-plane-transparent: rgba(242,184,229,0.14902);
+  --dark-plane-transparent: #f2b8e526;
   --dark-taxi: #ffe082;
-  --dark-taxi-transparent: rgba(255,224,130,0.14902);
+  --dark-taxi-transparent: #ffe08226;
   --dark-train: #60a2d7;
-  --dark-train-transparent: rgba(96,162,215,0.14902);
+  --dark-train-transparent: #60a2d726;
   --dark-tram: #b898e5;
-  --dark-tram-transparent: rgba(184,152,229,0.14902);
+  --dark-tram-transparent: #b898e526;
   --dark-walk: #8d8e9c;
   --dark-airportlinkbus: #f2b8e5;
-  --dark-airportlinkbus-transparent: rgba(242,184,229,0.14902);
+  --dark-airportlinkbus-transparent: #f2b8e526;
   --dark-airportlinkrail: #f2b8e5;
-  --dark-airportlinkrail-transparent: rgba(242,184,229,0.14902);
+  --dark-airportlinkrail-transparent: #f2b8e526;
   --standard-bicycle: #388f76;
   --standard-bus: #c5044e;
-  --standard-bus-transparent: rgba(197,4,78,0.14902);
+  --standard-bus-transparent: #c5044e26;
   --standard-cableway: #78469a;
-  --standard-cableway-transparent: rgba(120,70,154,0.14902);
+  --standard-cableway-transparent: #78469a26;
   --standard-carferry: #0c6693;
-  --standard-carferry-transparent: rgba(12,102,147,0.14902);
+  --standard-carferry-transparent: #0c669326;
   --standard-citybike: #388f76;
   --standard-ferry: #0c6693;
-  --standard-ferry-transparent: rgba(12,102,147,0.14902);
+  --standard-ferry-transparent: #0c669326;
   --standard-funicular: #78469a;
-  --standard-funicular-transparent: rgba(120,70,154,0.14902);
+  --standard-funicular-transparent: #78469a26;
   --standard-helicopter: #800664;
-  --standard-helicopter-transparent: rgba(128,6,100,0.14902);
+  --standard-helicopter-transparent: #80066426;
   --standard-metro: #bf5826;
-  --standard-metro-transparent: rgba(191,88,38,0.14902);
+  --standard-metro-transparent: #bf582626;
   --standard-mobility: #388f76;
   --standard-neutral: #181c56;
   --standard-plane: #800664;
-  --standard-plane-transparent: rgba(128,6,100,0.14902);
+  --standard-plane-transparent: #80066426;
   --standard-taxi: #3d3e40;
-  --standard-taxi-transparent: rgba(61,62,64,0.14902);
+  --standard-taxi-transparent: #3d3e4026;
   --standard-train: #00367f;
-  --standard-train-transparent: rgba(0,54,127,0.14902);
+  --standard-train-transparent: #00367f26;
   --standard-tram: #78469a;
-  --standard-tram-transparent: rgba(120,70,154,0.14902);
+  --standard-tram-transparent: #78469a26;
   --standard-walk: #8d8e9c;
   --standard-airportlinkbus: #800664;
-  --standard-airportlinkbus-transparent: rgba(128,6,100,0.14902);
+  --standard-airportlinkbus-transparent: #80066426;
   --standard-airportlinkrail: #800664;
-  --standard-airportlinkrail-transparent: rgba(128,6,100,0.14902);
+  --standard-airportlinkrail-transparent: #80066426;
 }
 
 :root {
   --eds-travel: 1;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-travel-header {
+  color: var(--components-travel-travelheader-standard-text);
+  display: flex;
+  flex-direction: column;
+  font-weight: 600;
+  line-height: 1.5;
+  max-width: 100%;
+}
+.eds-contrast .eds-travel-header {
+  color: var(--components-travel-travelheader-contrast-text);
+}
+.eds-travel-header--large {
+  font-size: 1.5rem;
+}
+.eds-travel-header--medium {
+  font-size: 1rem;
+}
+.eds-travel-header--no-wrap {
+  flex-direction: row;
+}
+.eds-travel-header__from, .eds-travel-header__to {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.eds-travel-header--no-wrap .eds-travel-header__from {
+  margin-right: 0.5em;
+}
+.eds-travel-header__to {
+  padding-left: 1.8333333333em;
+  position: relative;
+}
+.eds-travel-header__to::before {
+  background-color: var(--components-travel-travelheader-standard-stroke-line);
+  content: "";
+  display: block;
+  height: 0.1666666667em;
+  left: 0;
+  position: absolute;
+  top: 0.65em;
+  width: 1.3333333333em;
+}
+.eds-contrast .eds-travel-header__to::before {
+  background-color: var(--components-travel-travelheader-contrast-stroke-line);
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-travel-tag {
+  --background-color: var(--components-travel-traveltag-standard-tagfill-walk);
+  --text-color: var(--components-travel-traveltag-standard-text-line);
+  display: inline-flex;
+  position: relative;
+  padding: 0.25rem 0.5rem;
+  height: 2rem;
+  min-width: 2rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  border-radius: 0.25rem;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.eds-contrast .eds-travel-tag {
+  --background-color: var(--components-travel-traveltag-contrast-tagfill-walk);
+  --text-color: var(--components-travel-traveltag-contrast-text-line);
+}
+.eds-travel-tag--alert {
+  padding-right: 0.75rem;
+}
+.eds-travel-tag--alert--error {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.eds-contrast .eds-travel-tag--alert--error.eds-travel-tag {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.eds-travel-tag--icon-and-text > .eds-icon {
+  margin-right: 0.5rem;
+}
+.eds-travel-tag > .eds-icon {
+  font-size: 1.5rem;
+  color: var(--text-color);
+}
+.eds-travel-tag__alert {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  height: 1.125rem;
+  width: 1.125rem;
+  position: absolute;
+  top: 0.4375rem;
+  right: -0.6875rem;
+  background: var(--components-form-feedbacktext-information-standard-stroke);
 }
+.eds-contrast .eds-travel-tag__alert {
+  background: var(--components-form-feedbacktext-information-contrast-stroke);
+}
+.eds-travel-tag__alert-exclamation-icon {
+  color: var(--components-form-feedbacktext-warning-standard-icon-fill);
+}
+.eds-travel-tag__alert-exclamation-icon .svg-validation-circlefilled-exclamation {
+  fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
+}
+.eds-contrast .eds-travel-tag__alert-exclamation-icon {
+  color: var(--components-form-feedbacktext-warning-contrast-icon);
+}
+.eds-travel-tag__alert-error-icon {
+  font-size: 0.875rem;
+  color: var(--components-form-feedbacktext-negative-standard-icon-fill);
+}
+.eds-contrast .eds-travel-tag__alert-error-icon {
+  color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
+}
+.eds-travel-tag__alert-info-icon {
+  color: var(--components-form-feedbacktext-information-standard-icon-fill);
+}
+.eds-contrast .eds-travel-tag__alert-info-icon {
+  color: var(--components-form-feedbacktext-information-contrast-icon-fill);
+}
+.eds-travel-tag__wrapper {
+  display: inline-flex;
+}
+.eds-travel-tag__wrapper--label-position-right {
+  flex-direction: row;
+  align-items: center;
+}
+.eds-travel-tag__wrapper--label-position-bottom {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.eds-travel-tag__label {
+  color: var(--components-travel-traveltag-standard-text-label);
+  font-size: 1rem;
+}
+.eds-contrast .eds-travel-tag__label {
+  color: var(--components-travel-traveltag-contrast-text-label);
+}
+.eds-travel-tag__label--right {
+  margin-left: 0.5rem;
+}
+.eds-travel-tag__label--right--with-alert {
+  margin-left: 1rem;
+}
+.eds-travel-tag__label--bottom {
+  margin-top: 0.125rem;
+  font-size: 0.875rem;
+}
+.eds-travel-tag__close-button {
+  appearance: none;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  margin: 0 0 0 0.75rem;
+  padding: 0;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.eds-travel-tag__close-button .eds-icon {
+  color: var(--text-color);
+  font-size: 0.875rem;
+}
+.eds-travel-tag__close-button:has(:focus-visible) {
+  outline-offset: 0.125rem;
+  outline: 2px solid #ffffff;
+}.eds-leg-line {
+  flex-grow: 1;
+  mask-image: url("data:image/svg+xml,%3csvg%20width='4'%20height='4'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20fill='%23000'%20x='0'%20y='0'%20width='4'%20height='4'%20/%3e%3c/svg%3e");
+  mask-position: center;
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='4'%20height='4'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20fill='%23000'%20x='0'%20y='0'%20width='4'%20height='4'%20/%3e%3c/svg%3e");
+  -webkit-mask-position: center;
+}
+.eds-leg-line--dotted {
+  mask-image: url("data:image/svg+xml,%3csvg%20width='8'%20height='8'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ccircle%20fill='%23000'%20cx='4'%20cy='4'%20r='2'%20/%3e%3c/svg%3e");
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='8'%20height='8'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ccircle%20fill='%23000'%20cx='4'%20cy='4'%20r='2'%20/%3e%3c/svg%3e");
+}
+.eds-leg-line--vertical {
+  mask-repeat: repeat-y;
+  width: 1rem;
+  -webkit-mask-repeat: repeat-y;
+}
+.eds-leg-line--vertical.eds-leg-line--dashed {
+  mask-image: url("data:image/svg+xml,%3csvg%20width='4'%20height='16'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20fill='%23000'%20x='0'%20y='3'%20width='4'%20height='10'%20/%3e%3c/svg%3e");
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='4'%20height='16'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20fill='%23000'%20x='0'%20y='3'%20width='4'%20height='10'%20/%3e%3c/svg%3e");
+}
+.eds-leg-line--vertical.eds-leg-line--wave {
+  mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20role='presentation'%20width='16'%20height='16'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-width='4'%20d='M7.6%200c0%204%202.096%204%202.096%208S7.6%2012%207.6%2016'/%3e%3c/svg%3e");
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20role='presentation'%20width='16'%20height='16'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-width='4'%20d='M7.6%200c0%204%202.096%204%202.096%208S7.6%2012%207.6%2016'/%3e%3c/svg%3e");
+}
+.eds-leg-line--horizontal {
+  height: 1rem;
+  mask-repeat: repeat-x;
+  min-width: 6.25rem;
+  -webkit-mask-repeat: repeat-x;
+}
+.eds-leg-line--horizontal.eds-leg-line--dashed {
+  mask-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='4'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20fill='%23000'%20x='3'%20y='0'%20width='10'%20height='4'%20/%3e%3c/svg%3e");
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='4'%20role='presentation'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20fill='%23000'%20x='3'%20y='0'%20width='10'%20height='4'%20/%3e%3c/svg%3e");
+}
+.eds-leg-line--horizontal.eds-leg-line--wave {
+  mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20role='presentation'%20width='16'%20height='16'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-width='4'%20d='M0%209.048c4%200%204-2.096%208-2.096s4%202.096%208%202.096'/%3e%3c/svg%3e");
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20role='presentation'%20width='16'%20height='16'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-width='4'%20d='M0%209.048c4%200%204-2.096%208-2.096s4%202.096%208%202.096'/%3e%3c/svg%3e");
+}.eds-leg-bone {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+.eds-leg-bone__start, .eds-leg-bone__stop {
+  border-radius: 50%;
+  height: 1rem;
+  width: 1rem;
+}
+.eds-leg-bone__line {
+  flex-grow: 1;
+}
+.eds-leg-bone--vertical {
+  flex-direction: column;
+  width: 1rem;
+}
+.eds-leg-bone--vertical .eds-leg-bone__start {
+  margin-bottom: 0.125rem;
+}
+.eds-leg-bone--vertical .eds-leg-bone__stop {
+  margin-top: 0.125rem;
+}
+.eds-leg-bone--horizontal {
+  flex-direction: row;
+  height: 1rem;
+}
+.eds-leg-bone--horizontal .eds-leg-bone__start {
+  margin-right: 0.125rem;
+}
+.eds-leg-bone--horizontal .eds-leg-bone__stop {
+  margin-left: 0.125rem;
+}