@entur/travel 6.3.14-beta.0 → 6.3.14-beta.10

package/dist/travel.esm.js

@@ -1,487 +1,378 @@
-import { warnAboutMissingStyles } from "@entur/utils";
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, cloneElement, useEffect } from "react";
-import { TrainIcon, BusIcon, MobilityIcon, CarferryIcon, FerryIcon, WalkIcon, BicycleIcon, TaxiIcon, CablewayIcon, FunicularIcon, TramIcon, HelicopterIcon, PlaneIcon, MetroIcon, CloseSmallIcon, ValidationInfoFilledIcon, ValidationErrorFilledIcon, ValidationExclamationCircleFilledIcon } from "@entur/icons";
-import { useContrast } from "@entur/layout";
-import { Switch } from "@entur/form";
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+import { warnAboutMissingStyles } from '@entur/utils';
+import React, { useRef, cloneElement, useEffect } from 'react';
+import classNames from 'classnames';
+import { TrainIcon, BusIcon, MobilityIcon, CarferryIcon, FerryIcon, WalkIcon, BicycleIcon, TaxiIcon, CablewayIcon, FunicularIcon, TramIcon, HelicopterIcon, PlaneIcon, MetroIcon, CloseSmallIcon, ValidationInfoFilledIcon, ValidationErrorFilledIcon, ValidationExclamationCircleFilledIcon } from '@entur/icons';
+import { useContrast } from '@entur/layout';
+import { Switch } from '@entur/form';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
 }
-var classnames = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var hasRequiredClassnames;
-function requireClassnames() {
-  if (hasRequiredClassnames) return classnames.exports;
-  hasRequiredClassnames = 1;
-  (function(module) {
-    (function() {
-      var hasOwn = {}.hasOwnProperty;
-      function classNames2() {
-        var classes = "";
-        for (var i = 0; i < arguments.length; i++) {
-          var arg = arguments[i];
-          if (arg) {
-            classes = appendClass(classes, parseValue(arg));
-          }
-        }
-        return classes;
-      }
-      function parseValue(arg) {
-        if (typeof arg === "string" || typeof arg === "number") {
-          return arg;
-        }
-        if (typeof arg !== "object") {
-          return "";
-        }
-        if (Array.isArray(arg)) {
-          return classNames2.apply(null, arg);
-        }
-        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-          return arg.toString();
-        }
-        var classes = "";
-        for (var key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes = appendClass(classes, key);
-          }
-        }
-        return classes;
-      }
-      function appendClass(value, newClass) {
-        if (!newClass) {
-          return value;
-        }
-        if (value) {
-          return value + " " + newClass;
-        }
-        return value + newClass;
-      }
-      if (module.exports) {
-        classNames2.default = classNames2;
-        module.exports = classNames2;
-      } else {
-        window.classNames = classNames2;
-      }
-    })();
-  })(classnames);
-  return classnames.exports;
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
 }
-var classnamesExports = requireClassnames();
-const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const TravelHeader = ({
-  as: Element = "div",
-  from,
-  to,
-  size = "large",
-  className,
-  noWrap,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Element,
-    {
-      className: classNames("eds-travel-header", className, {
-        "eds-travel-header--large": size === "large",
-        "eds-travel-header--medium": size === "medium",
-        "eds-travel-header--no-wrap": noWrap
-      }),
-      "aria-label": `Fra ${from}, til ${to}`,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "eds-travel-header__from", children: from }),
-        /* @__PURE__ */ jsx("span", { className: "eds-travel-header__to", children: to })
-      ]
-    }
-  );
+
+var _excluded$5 = ["as", "from", "to", "size", "className", "noWrap"];
+var TravelHeader = function TravelHeader(_ref) {
+  var _ref$as = _ref.as,
+    Element = _ref$as === void 0 ? 'div' : _ref$as,
+    from = _ref.from,
+    to = _ref.to,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
+    className = _ref.className,
+    noWrap = _ref.noWrap,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  return React.createElement(Element, _extends({
+    className: classNames('eds-travel-header', className, {
+      'eds-travel-header--large': size === 'large',
+      'eds-travel-header--medium': size === 'medium',
+      'eds-travel-header--no-wrap': noWrap
+    }),
+    "aria-label": "Fra " + from + ", til " + to
+  }, rest), React.createElement("span", {
+    className: "eds-travel-header__from"
+  }, from), React.createElement("span", {
+    className: "eds-travel-header__to"
+  }, to));
 };
-const getTransportStyle = (mode) => {
+
+var getTransportStyle = function getTransportStyle(mode) {
   switch (mode) {
-    case "metro":
+    case 'metro':
       return {
         Icon: MetroIcon,
-        pattern: "line",
-        ariaLabel: "T-bane"
+        pattern: 'line',
+        ariaLabel: 'T-bane'
       };
-    case "bus":
-    case "neutral":
+    case 'bus':
+    case 'neutral':
       return {
         Icon: BusIcon,
-        pattern: "dashed",
-        ariaLabel: "Buss"
+        pattern: 'dashed',
+        ariaLabel: 'Buss'
       };
-    case "plane":
-    case "air":
+    case 'plane':
+    case 'air':
       return {
         Icon: PlaneIcon,
-        pattern: "line",
-        ariaLabel: "Fly"
+        pattern: 'line',
+        ariaLabel: 'Fly'
       };
-    case "helicopter":
+    case 'helicopter':
       return {
         Icon: HelicopterIcon,
-        pattern: "line",
-        ariaLabel: "Helikopter"
+        pattern: 'line',
+        ariaLabel: 'Helikopter'
       };
-    case "tram":
+    case 'tram':
       return {
         Icon: TramIcon,
-        pattern: "line",
-        ariaLabel: "Trikk"
+        pattern: 'line',
+        ariaLabel: 'Trikk'
       };
-    case "funicular":
+    case 'funicular':
       return {
         Icon: FunicularIcon,
-        pattern: "line",
-        ariaLabel: "Taubane"
+        pattern: 'line',
+        ariaLabel: 'Taubane'
       };
-    case "cableway":
+    case 'cableway':
       return {
         Icon: CablewayIcon,
-        pattern: "line",
-        ariaLabel: "Gondol"
+        pattern: 'line',
+        ariaLabel: 'Gondol'
       };
-    case "taxi":
+    case 'taxi':
       return {
         Icon: TaxiIcon,
-        pattern: "dashed",
-        ariaLabel: "Taxi"
+        pattern: 'dashed',
+        ariaLabel: 'Taxi'
       };
-    case "bicycle":
-    case "citybike":
+    case 'bicycle':
+    case 'citybike':
       return {
         Icon: BicycleIcon,
-        pattern: "dashed",
-        ariaLabel: "Sykkel"
+        pattern: 'dashed',
+        ariaLabel: 'Sykkel'
       };
-    case "walk":
+    case 'walk':
       return {
         Icon: WalkIcon,
-        pattern: "dotted",
-        ariaLabel: "Gange"
+        pattern: 'dotted',
+        ariaLabel: 'Gange'
       };
-    case "train":
-    case "rail":
+    case 'train':
+    case 'rail':
       return {
         Icon: TrainIcon,
-        pattern: "line",
-        ariaLabel: "Tog"
+        pattern: 'line',
+        ariaLabel: 'Tog'
       };
-    case "ferry":
-    case "water":
+    case 'ferry':
+    case 'water':
       return {
         Icon: FerryIcon,
-        pattern: "wave",
-        ariaLabel: "Ferge"
+        pattern: 'wave',
+        ariaLabel: 'Ferge'
       };
-    case "carferry":
+    case 'carferry':
       return {
         Icon: CarferryIcon,
-        pattern: "wave",
-        ariaLabel: "Bilferge"
+        pattern: 'wave',
+        ariaLabel: 'Bilferge'
       };
-    case "mobility":
+    case 'mobility':
       return {
         Icon: MobilityIcon,
-        pattern: "line",
-        ariaLabel: "El-sparkesykkel"
+        pattern: 'line',
+        ariaLabel: 'El-sparkesykkel'
       };
-    case "airportLinkBus":
-    case "airportlinkbus":
+    case 'airportLinkBus':
+    case 'airportlinkbus':
       return {
         Icon: BusIcon,
-        pattern: "dashed",
-        ariaLabel: "Flybuss"
+        pattern: 'dashed',
+        ariaLabel: 'Flybuss'
       };
-    case "airportLinkRail":
-    case "airportlinkrail":
+    case 'airportLinkRail':
+    case 'airportlinkrail':
       return {
         Icon: TrainIcon,
-        pattern: "line",
-        ariaLabel: "Flytog"
+        pattern: 'line',
+        ariaLabel: 'Flytog'
       };
-    case "none":
+    case 'none':
       return {
         Icon: React.Fragment,
-        pattern: "line",
-        ariaLabel: ""
+        pattern: 'line',
+        ariaLabel: ''
       };
-    case "scooter":
-      throw Error(
-        `transport type 'scooter' is deprecated: Please use 'mobility' instead.`
-      );
-    case "bike":
-      throw Error(
-        `transport type 'bike' is deprecated: Please use 'bicycle' instead.`
-      );
-    case "car":
-      throw Error(
-        `transport type 'car' is deprecated: Please use 'taxi' instead.`
-      );
-    case "foot":
-      throw Error(
-        `transport type 'foot' is deprecated: Please use 'walk' instead.`
-      );
+    case 'scooter':
+      throw Error("transport type 'scooter' is deprecated: Please use 'mobility' instead.");
+    case 'bike':
+      throw Error("transport type 'bike' is deprecated: Please use 'bicycle' instead.");
+    case 'car':
+      throw Error("transport type 'car' is deprecated: Please use 'taxi' instead.");
+    case 'foot':
+      throw Error("transport type 'foot' is deprecated: Please use 'walk' instead.");
     default:
-      throw Error("Please select a transport for the Travel component.");
+      throw Error('Please select a transport for the Travel component.');
   }
 };
-const TravelTag = ({
-  children,
-  className,
-  alert = "none",
-  transport = "none",
-  label,
-  labelPlacement = "right",
-  onClose = void 0,
-  ...rest
-}) => {
-  const isContrast = useContrast();
-  const isClosable = onClose ? true : false;
-  const transportIsSet = transport !== "none";
-  const alertIsSet = alert !== "none";
-  const tagRef = useRef(null);
-  const numberOfChildren = React.Children.count(children);
-  const { Icon, ariaLabel: ariaLabelForTranportIcon } = getTransportStyle(transport);
-  const deCapitalizeTransport = transport.toLowerCase();
-  const IconWithAriaHidden = cloneElement(/* @__PURE__ */ jsx(Icon, {}), { "aria-hidden": "true" });
-  const backgroundColor = "var(--components-travel-traveltag-standard-tagfill-" + deCapitalizeTransport + ")";
-  const contrastBackgroundColor = "var(--components-travel-traveltag-contrast-tagfill-" + deCapitalizeTransport + ")";
-  const errorBackgroundColor = "var(--components-travel-traveltag-standard-tagfill-" + deCapitalizeTransport + "-cancled)";
-  const errorContrastBackgroundColor = "var(--components-travel-traveltag-contrast-tagfill-" + deCapitalizeTransport + "-cancled)";
-  const errorContrastTextColor = "var(--components-travel-traveltag-contrast-text-line-" + deCapitalizeTransport + "-cancled)";
-  const errorTextColor = "var(--components-travel-traveltag-standard-text-line-" + deCapitalizeTransport + "-cancled)";
-  useEffect(() => {
+
+var _excluded$4 = ["children", "className", "alert", "transport", "label", "labelPlacement", "onClose"];
+var TravelTag = function TravelTag(_ref) {
+  var _classNames;
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$alert = _ref.alert,
+    alert = _ref$alert === void 0 ? 'none' : _ref$alert,
+    _ref$transport = _ref.transport,
+    transport = _ref$transport === void 0 ? 'none' : _ref$transport,
+    label = _ref.label,
+    _ref$labelPlacement = _ref.labelPlacement,
+    labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? undefined : _ref$onClose,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var isContrast = useContrast();
+  var isClosable = onClose ? true : false;
+  var transportIsSet = transport !== 'none';
+  var alertIsSet = alert !== 'none';
+  var tagRef = useRef(null);
+  var numberOfChildren = React.Children.count(children);
+  var _getTransportStyle = getTransportStyle(transport),
+    Icon = _getTransportStyle.Icon,
+    ariaLabelForTranportIcon = _getTransportStyle.ariaLabel;
+  var deCapitalizeTransport = transport.toLowerCase();
+  var IconWithAriaHidden = cloneElement(React.createElement(Icon, null), {
+    'aria-hidden': 'true'
+  });
+  var backgroundColor = 'var(--components-travel-traveltag-standard-tagfill-' + deCapitalizeTransport + ')';
+  var contrastBackgroundColor = 'var(--components-travel-traveltag-contrast-tagfill-' + deCapitalizeTransport + ')';
+  // Error colors
+  var errorBackgroundColor = 'var(--components-travel-traveltag-standard-tagfill-' + deCapitalizeTransport + '-cancled)';
+  var errorContrastBackgroundColor = 'var(--components-travel-traveltag-contrast-tagfill-' + deCapitalizeTransport + '-cancled)';
+  var errorContrastTextColor = 'var(--components-travel-traveltag-contrast-text-line-' + deCapitalizeTransport + '-cancled)';
+  var errorTextColor = 'var(--components-travel-traveltag-standard-text-line-' + deCapitalizeTransport + '-cancled)';
+  useEffect(function () {
     if (transportIsSet) {
-      let colorToSet;
-      let textColorToSet;
-      if (transport === "walk") {
-        tagRef.current?.style.setProperty(
-          "--text-color",
-          "var(--components-travel-traveltag-standard-icon-walk)"
-        );
+      var _tagRef$current3;
+      var colorToSet;
+      var textColorToSet;
+      // Walk has another icon/text color then the other transports
+      if (transport === 'walk') {
+        var _tagRef$current;
+        (_tagRef$current = tagRef.current) == null || _tagRef$current.style.setProperty('--text-color', 'var(--components-travel-traveltag-standard-icon-walk)');
       }
-      if (alert === "error") {
+      // Error
+      if (alert === 'error') {
+        var _tagRef$current2;
         colorToSet = isContrast ? errorContrastBackgroundColor : errorBackgroundColor;
         textColorToSet = isContrast ? errorContrastTextColor : errorTextColor;
-        tagRef.current?.style.setProperty("--text-color", `${textColorToSet}`);
+        (_tagRef$current2 = tagRef.current) == null || _tagRef$current2.style.setProperty('--text-color', "" + textColorToSet);
       } else {
         colorToSet = isContrast ? contrastBackgroundColor : backgroundColor;
       }
-      tagRef.current?.style.setProperty("--background-color", `${colorToSet}`);
-    }
-  }, [
-    transportIsSet,
-    isContrast,
-    backgroundColor,
-    contrastBackgroundColor,
-    errorBackgroundColor,
-    alert
-  ]);
-  const TravelTagWithoutLabel = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("eds-travel-tag", {
-        "eds-travel-tag--closable": isClosable,
-        "eds-travel-tag--alert": alertIsSet,
-        "eds-travel-tag--alert--error": alert === "error",
-        "eds-travel-tag--transport": transportIsSet,
-        "eds-travel-tag--icon-and-text": numberOfChildren > 1 || transportIsSet && numberOfChildren > 0,
-        className
-      }),
-      ref: tagRef,
-      "aria-label": `${ariaLabelForTranportIcon} ${children} ${alertIsSet ? alert : ""}`,
-      role: "img",
-      ...rest,
-      children: [
-        IconWithAriaHidden,
-        children,
-        isClosable && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            type: "button",
-            className: "eds-travel-tag__close-button",
-            children: /* @__PURE__ */ jsx(CloseSmallIcon, { inline: true })
-          }
-        ),
-        alertIsSet && /* @__PURE__ */ jsxs("span", { className: "eds-travel-tag__alert", children: [
-          alert === "info" && /* @__PURE__ */ jsx(
-            ValidationInfoFilledIcon,
-            {
-              "aria-hidden": true,
-              className: "eds-travel-tag__alert-info-icon"
-            }
-          ),
-          alert === "error" && /* @__PURE__ */ jsx(
-            ValidationErrorFilledIcon,
-            {
-              "aria-hidden": true,
-              className: "eds-travel-tag__alert-error-icon"
-            }
-          ),
-          alert === "warning" && /* @__PURE__ */ jsx(
-            ValidationExclamationCircleFilledIcon,
-            {
-              "aria-hidden": true,
-              className: "eds-travel-tag__alert-exclamation-icon"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-  const Label = /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames("eds-travel-tag__label", {
-        [`eds-travel-tag__label--${labelPlacement}`]: label,
-        [`eds-travel-tag__label--${labelPlacement}--with-alert`]: label && alertIsSet
-      }),
-      children: label
+      (_tagRef$current3 = tagRef.current) == null || _tagRef$current3.style.setProperty('--background-color', "" + colorToSet);
     }
-  );
+  }, [transportIsSet, isContrast, backgroundColor, contrastBackgroundColor, errorBackgroundColor, alert]);
+  var TravelTagWithoutLabel = React.createElement("div", _extends({
+    className: classNames('eds-travel-tag', {
+      'eds-travel-tag--closable': isClosable,
+      'eds-travel-tag--alert': alertIsSet,
+      'eds-travel-tag--alert--error': alert === 'error',
+      'eds-travel-tag--transport': transportIsSet,
+      'eds-travel-tag--icon-and-text': numberOfChildren > 1 || transportIsSet && numberOfChildren > 0,
+      className: className
+    }),
+    ref: tagRef,
+    "aria-label": ariaLabelForTranportIcon + " " + children + " " + (alertIsSet ? alert : ''),
+    role: "img"
+  }, rest), IconWithAriaHidden, children, isClosable && React.createElement("button", {
+    onClick: onClose,
+    type: "button",
+    className: "eds-travel-tag__close-button"
+  }, React.createElement(CloseSmallIcon, {
+    inline: true
+  })), alertIsSet && React.createElement("span", {
+    className: "eds-travel-tag__alert"
+  }, alert === 'info' && React.createElement(ValidationInfoFilledIcon, {
+    "aria-hidden": true,
+    className: "eds-travel-tag__alert-info-icon"
+  }), alert === 'error' && React.createElement(ValidationErrorFilledIcon, {
+    "aria-hidden": true,
+    className: "eds-travel-tag__alert-error-icon"
+  }), alert === 'warning' && React.createElement(ValidationExclamationCircleFilledIcon, {
+    "aria-hidden": true,
+    className: "eds-travel-tag__alert-exclamation-icon"
+  })));
+  var Label = React.createElement("div", {
+    className: classNames('eds-travel-tag__label', (_classNames = {}, _classNames["eds-travel-tag__label--" + labelPlacement] = label, _classNames["eds-travel-tag__label--" + labelPlacement + "--with-alert"] = label && alertIsSet, _classNames))
+  }, label);
   if (label) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("eds-travel-tag__wrapper", {
-          [`eds-travel-tag__wrapper--label-position-${labelPlacement}`]: label
-        }),
-        children: [
-          TravelTagWithoutLabel,
-          Label
-        ]
-      }
-    );
+    var _classNames2;
+    return React.createElement("div", {
+      className: classNames('eds-travel-tag__wrapper', (_classNames2 = {}, _classNames2["eds-travel-tag__wrapper--label-position-" + labelPlacement] = label, _classNames2))
+    }, TravelTagWithoutLabel, Label);
   }
   return TravelTagWithoutLabel;
 };
-const LegLine = ({
-  color,
-  direction = "horizontal",
-  pattern,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames("eds-leg-line", className, {
-        [`eds-leg-line--${pattern}`]: pattern,
-        [`eds-leg-line--${direction}`]: direction
-      }),
-      style: { backgroundColor: color },
-      ...rest
+
+var _excluded$3 = ["color", "direction", "pattern", "className"];
+var LegLine = function LegLine(_ref) {
+  var _classNames;
+  var color = _ref.color,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    pattern = _ref.pattern,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React.createElement("div", _extends({
+    className: classNames('eds-leg-line', className, (_classNames = {}, _classNames["eds-leg-line--" + pattern] = pattern, _classNames["eds-leg-line--" + direction] = direction, _classNames)),
+    style: {
+      backgroundColor: color
     }
-  );
+  }, rest));
 };
-const LegBone = ({
-  direction,
-  pattern,
-  color,
-  startColor,
-  endColor,
-  showStart = true,
-  showStop = true,
-  showLine = true,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(className, "eds-leg-bone", [
-        { "eds-leg-bone--vertical": direction === "vertical" },
-        { "eds-leg-bone--horizontal": direction === "horizontal" }
-      ]),
-      ...rest,
-      children: [
-        showStart && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `eds-leg-bone__start`,
-            style: { backgroundColor: startColor || color }
-          }
-        ),
-        showLine && /* @__PURE__ */ jsx(
-          LegLine,
-          {
-            className: `eds-leg-bone__line`,
-            direction,
-            color,
-            pattern
-          }
-        ),
-        showStop && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `eds-leg-bone__stop`,
-            style: { backgroundColor: endColor || color }
-          }
-        )
-      ]
+
+var _excluded$2 = ["direction", "pattern", "color", "startColor", "endColor", "showStart", "showStop", "showLine", "className"];
+var LegBone = function LegBone(_ref) {
+  var direction = _ref.direction,
+    pattern = _ref.pattern,
+    color = _ref.color,
+    startColor = _ref.startColor,
+    endColor = _ref.endColor,
+    _ref$showStart = _ref.showStart,
+    showStart = _ref$showStart === void 0 ? true : _ref$showStart,
+    _ref$showStop = _ref.showStop,
+    showStop = _ref$showStop === void 0 ? true : _ref$showStop,
+    _ref$showLine = _ref.showLine,
+    showLine = _ref$showLine === void 0 ? true : _ref$showLine,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return React.createElement("div", _extends({
+    className: classNames(className, 'eds-leg-bone', [{
+      'eds-leg-bone--vertical': direction === 'vertical'
+    }, {
+      'eds-leg-bone--horizontal': direction === 'horizontal'
+    }])
+  }, rest), showStart && React.createElement("div", {
+    className: "eds-leg-bone__start",
+    style: {
+      backgroundColor: startColor || color
     }
-  );
-};
-const TravelLeg = ({
-  className,
-  transport,
-  direction,
-  ...rest
-}) => {
-  const { pattern } = getTransportStyle(transport);
-  const isContrast = useContrast();
-  const deCapitalizeTransport = transport.toLowerCase();
-  const backgroundColor = "var(--components-travel-travelleg-standard-" + deCapitalizeTransport + ")";
-  const contrastBackgroundColor = "var(--components-travel-travelleg-contrast-" + deCapitalizeTransport + ")";
-  return /* @__PURE__ */ jsx(
-    LegBone,
-    {
-      direction,
-      pattern,
-      color: isContrast ? contrastBackgroundColor : backgroundColor,
-      className,
-      ...rest
+  }), showLine && React.createElement(LegLine, {
+    className: "eds-leg-bone__line",
+    direction: direction,
+    color: color,
+    pattern: pattern
+  }), showStop && React.createElement("div", {
+    className: "eds-leg-bone__stop",
+    style: {
+      backgroundColor: endColor || color
     }
-  );
+  }));
 };
-const TravelSwitch = ({
-  className,
-  children,
-  labelPlacement = "right",
-  transport,
-  size,
-  ...rest
-}) => {
-  const { Icon } = getTransportStyle(transport);
-  const deCapitalizeTransport = transport.toLowerCase();
-  const backgroundColor = "var(--components-travel-travelswitch-standard-backgroundtrue-" + deCapitalizeTransport + ")";
-  const contrastBackgroundColor = "var(--components-travel-travelswitch-contrast-backgroundtrue-" + deCapitalizeTransport + ")";
-  return /* @__PURE__ */ jsx(
-    Switch,
-    {
-      className,
-      labelPlacement,
-      color: backgroundColor,
-      contrastColor: contrastBackgroundColor,
-      icon: /* @__PURE__ */ jsx(Icon, {}),
-      size,
-      ...rest,
-      children
-    }
-  );
+
+var _excluded$1 = ["className", "transport", "direction"];
+var TravelLeg = function TravelLeg(_ref) {
+  var className = _ref.className,
+    transport = _ref.transport,
+    direction = _ref.direction,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _getTransportStyle = getTransportStyle(transport),
+    pattern = _getTransportStyle.pattern;
+  var isContrast = useContrast();
+  var deCapitalizeTransport = transport.toLowerCase();
+  var backgroundColor = 'var(--components-travel-travelleg-standard-' + deCapitalizeTransport + ')';
+  var contrastBackgroundColor = 'var(--components-travel-travelleg-contrast-' + deCapitalizeTransport + ')';
+  return React.createElement(LegBone, _extends({
+    direction: direction,
+    pattern: pattern,
+    color: isContrast ? contrastBackgroundColor : backgroundColor,
+    className: className
+  }, rest));
 };
-warnAboutMissingStyles("travel");
-export {
-  LegBone,
-  LegLine,
-  TravelHeader,
-  TravelLeg,
-  TravelSwitch,
-  TravelTag
+
+var _excluded = ["className", "children", "labelPlacement", "transport", "size"];
+var TravelSwitch = function TravelSwitch(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$labelPlacement = _ref.labelPlacement,
+    labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
+    transport = _ref.transport,
+    size = _ref.size,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _getTransportStyle = getTransportStyle(transport),
+    Icon = _getTransportStyle.Icon;
+  var deCapitalizeTransport = transport.toLowerCase();
+  var backgroundColor = 'var(--components-travel-travelswitch-standard-backgroundtrue-' + deCapitalizeTransport + ')';
+  var contrastBackgroundColor = 'var(--components-travel-travelswitch-contrast-backgroundtrue-' + deCapitalizeTransport + ')';
+  return React.createElement(Switch, _extends({
+    className: className,
+    labelPlacement: labelPlacement,
+    color: backgroundColor,
+    contrastColor: contrastBackgroundColor,
+    icon: React.createElement(Icon, null),
+    size: size
+  }, rest), children);
 };
+
+warnAboutMissingStyles('travel');
+
+export { LegBone, LegLine, TravelHeader, TravelLeg, TravelSwitch, TravelTag };
 //# sourceMappingURL=travel.esm.js.map