@entur/travel 6.3.13 → 6.3.14-beta.0

package/dist/travel.esm.js

@@ -1,378 +1,487 @@
-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);
+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;
 }
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
+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;
 }
-
-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));
+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 getTransportStyle = function getTransportStyle(mode) {
+const 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.");
   }
 };
-
-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 () {
+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(() => {
     if (transportIsSet) {
-      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)');
+      let colorToSet;
+      let textColorToSet;
+      if (transport === "walk") {
+        tagRef.current?.style.setProperty(
+          "--text-color",
+          "var(--components-travel-traveltag-standard-icon-walk)"
+        );
       }
-      // Error
-      if (alert === 'error') {
-        var _tagRef$current2;
+      if (alert === "error") {
         colorToSet = isContrast ? errorContrastBackgroundColor : errorBackgroundColor;
         textColorToSet = isContrast ? errorContrastTextColor : errorTextColor;
-        (_tagRef$current2 = tagRef.current) == null || _tagRef$current2.style.setProperty('--text-color', "" + textColorToSet);
+        tagRef.current?.style.setProperty("--text-color", `${textColorToSet}`);
       } else {
         colorToSet = isContrast ? contrastBackgroundColor : backgroundColor;
       }
-      (_tagRef$current3 = tagRef.current) == null || _tagRef$current3.style.setProperty('--background-color', "" + colorToSet);
+      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
     }
-  }, [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) {
-    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 /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("eds-travel-tag__wrapper", {
+          [`eds-travel-tag__wrapper--label-position-${labelPlacement}`]: label
+        }),
+        children: [
+          TravelTagWithoutLabel,
+          Label
+        ]
+      }
+    );
   }
   return TravelTagWithoutLabel;
 };
-
-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
+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
     }
-  }, rest));
+  );
 };
-
-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 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 }
+          }
+        )
+      ]
     }
-  }), 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 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
     }
-  }));
+  );
 };
-
-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));
+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 = ["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
 };
-
-warnAboutMissingStyles('travel');
-
-export { LegBone, LegLine, TravelHeader, TravelLeg, TravelSwitch, TravelTag };
 //# sourceMappingURL=travel.esm.js.map