@mapsindoors/map-template 1.8.2 → 1.9.1

package/dist/{mi-route-instructions-step-legacy.entry-3b111960.mjs → mi-route-instructions-step-legacy.entry-bd8122ab.mjs}

@@ -1,4 +1,4 @@
-import { r as n, c as r, h as e } from "./webcomponent-11ee81df.mjs";
+import { r as n, c as r, h as e } from "./webcomponent-7854dce6.mjs";
 import { U as o } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
 import { c as l } from "./utils-ae714467-b07fc3be.mjs";
 const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;grid-template-columns:40px 1fr 40px;grid-template-areas:"actionicon heading heading" "modeicon description toggle" "modeicon substeps substeps"}.step__action-icon{-ms-grid-row:1;-ms-grid-column:1;display:flex;justify-content:center;align-items:center;grid-area:actionicon}.step__action-icon--circled{position:relative}.step__action-icon--circled::before{position:absolute;width:24px;height:24px;border:1px solid #1c1917;content:"";border-radius:50%}.step__action-icon mi-icon{display:block;width:12px;height:12px}.step__heading{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-span:2;grid-area:heading;font-size:1rem;margin:0;border-bottom:1px solid #DCDCDF;border-top:1px solid #DCDCDF;padding:12px}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:1;grid-area:modeicon;display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__description{-ms-grid-row:2;-ms-grid-column:2;grid-area:description;padding:12px}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{-ms-grid-row:2;-ms-grid-column:3;grid-area:toggle;display:flex;justify-content:center;align-items:center;transition:transform 300ms;cursor:pointer}.step__toggle--open{transform:rotate(180deg)}.step__toggle mi-icon{width:16px;height:16px;display:block;background-color:#3b82f6}.step__substeps{-ms-grid-row:3;-ms-grid-column:2;-ms-grid-column-span:2;grid-area:substeps}', d = class {
@@ -96,7 +96,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderSubsteps() {
-    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver", {
+    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver-legacy", {
       "data-maneuver-index": s,
       maneuver: JSON.stringify(t),
       translations: this.translations,

package/dist/{mi-route-instructions-step.entry-9b5783de.mjs → mi-route-instructions-step.entry-437db405.mjs}

@@ -1,9 +1,9 @@
-import { r, c as o, h as e } from "./webcomponent-11ee81df.mjs";
-import { U as a } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
-import { c as l } from "./utils-ae714467-b07fc3be.mjs";
-const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;gap:8px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;gap:8px;align-items:center}.step__info.destination{grid-auto-flow:row;justify-items:center}.step__destination{display:grid;gap:8px;align-items:center;justify-content:center;grid-auto-flow:column}.step__action-icon--circled{position:relative}.step__action-icon mi-icon{display:block;width:40px;height:40px}.step__heading{font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{grid-area:modeicon;display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{grid-area:toggle;display:flex;justify-content:center;align-items:center;transition:transform 300ms;cursor:pointer}.step__toggle--open{transform:rotate(180deg)}.step__toggle mi-icon{width:16px;height:16px;display:block;background-color:#3b82f6}.step__substeps{grid-area:substeps}', d = class {
+import { r as o, c as a, h as e } from "./webcomponent-7854dce6.mjs";
+import { U as n } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
+import { c as p } from "./utils-ae714467-b07fc3be.mjs";
+const l = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;gap:8px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;gap:8px;align-items:center}.step__info.destination{grid-auto-flow:row;justify-items:center}.step__destination{display:grid;gap:8px;align-items:center;justify-content:center;grid-auto-flow:column}.step__action-icon--circled{position:relative}.step__action-icon mi-icon{display:block;width:40px;height:40px}.step__heading{font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{display:grid;justify-content:center}.step__toggle mi-icon{width:24px;height:24px;display:block}.step__substeps{display:grid;gap:32px}.step__details{display:grid;gap:24px;width:100%}', d = class {
   constructor(t) {
-    r(this, t), this.stepClicked = o(this, "stepClicked", 7), this.isInternetExplorer = l(), this.step = void 0, this.stepData = void 0, this.hideIndoorSubsteps = !0, this.fromRouteContext = "", this.fromTravelMode = void 0, this.fromTransitStop = void 0, this.destinationLocation = void 0, this.unit = navigator.language === "en-US" ? a.Imperial : a.Metric, this.translations = void 0, this.translationsData = void 0, this.substepsAreOpen = !1;
+    o(this, t), this.stepClicked = a(this, "stepClicked", 7), this.substepsToggled = a(this, "substepsToggled", 7), this.isInternetExplorer = p(), this.step = void 0, this.stepData = void 0, this.hideIndoorSubsteps = !0, this.fromRouteContext = "", this.fromTravelMode = void 0, this.fromTransitStop = void 0, this.destinationLocation = void 0, this.unit = navigator.language === "en-US" ? n.Imperial : n.Metric, this.translations = void 0, this.translationsData = void 0, this.substepsAreOpen = !1;
   }
   parseStepProp() {
     this.step && (this.stepData = JSON.parse(this.step));
@@ -11,6 +11,18 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
   parseTranslationsProp() {
     this.translations && (this.translationsData = JSON.parse(this.translations));
   }
+  /**
+   * Programmatically open the substeps.
+   */
+  openSubsteps() {
+    this.substepsAreOpen = !0;
+  }
+  /**
+   * Programmatically close the substeps.
+   */
+  closeSubsteps() {
+    this.substepsAreOpen = !1;
+  }
   componentWillLoad() {
     this.parseStepProp(), this.parseTranslationsProp();
   }
@@ -87,13 +99,13 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
   getTransitVehicleIconName() {
     var t, s;
     const i = (s = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || s === void 0 ? void 0 : s.type.toLowerCase();
-    return i && ["boat", "bus", "railway", "train", "subway"].some((n) => n === i) ? i : "transit";
+    return i && ["boat", "bus", "railway", "train", "subway"].some((r) => r === i) ? i : "transit";
   }
   /**
    * Toggles visibility of sub steps (steps in steps)
    */
   toggleSubsteps() {
-    this.substepsAreOpen = !this.substepsAreOpen;
+    this.substepsToggled.emit(), this.substepsAreOpen = !this.substepsAreOpen;
   }
   /**
    * Render substeps if they should be visible.
@@ -101,9 +113,10 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderSubsteps() {
-    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver", {
-      "data-maneuver-index": s,
-      maneuver: JSON.stringify(t),
+    var t;
+    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, (t = this.stepData.steps) === null || t === void 0 ? void 0 : t.map((s, i) => e("mi-route-instructions-maneuver", {
+      "data-maneuver-index": i,
+      maneuver: JSON.stringify(s),
       translations: this.translations,
       unit: this.unit,
       // @ts-ignore
@@ -120,7 +133,8 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderToggleButton() {
-    return this.stepData.steps.length <= 0 || this.hideIndoorSubsteps === !0 && this.stepData.route_context.toLowerCase() === "insidebuilding" ? null : e("span", { class: `step__toggle ${this.substepsAreOpen ? "step__toggle--open" : ""}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? "▼" : e("mi-icon", { part: "step-toggle", "icon-name": "toggle" }));
+    var t;
+    return ((t = this.stepData.steps) === null || t === void 0 ? void 0 : t.length) <= 0 ? null : e("span", { class: "step__toggle", onClick: () => this.toggleSubsteps() }, this.substepsAreOpen ? e("mi-icon", { part: "step-toggle", "icon-name": "minimize" }) : e("mi-icon", { part: "step-toggle", "icon-name": "maximize" }));
   }
   /**
    * Render distance part.
@@ -130,13 +144,21 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
   renderDistance() {
     return e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), e("br", null));
   }
+  /**
+   * Render toggle and substeps.
+   *
+   * @returns {JSX.Element}
+   */
+  renderToggleAndSubsteps() {
+    return e("div", { class: "step__details" }, this.renderToggleButton(), this.renderSubsteps());
+  }
   /**
    * Render a driving step.
    *
    * @returns {JSX.Element}
    */
   renderDrivingStep() {
-    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())));
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())), this.renderToggleAndSubsteps());
   }
   /**
    * Get display heading.
@@ -160,7 +182,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    */
   renderWalkingStep() {
     let t, s;
-    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("div", { part: "step-heading", class: "step__heading" }, t)));
+    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("div", { part: "step-heading", class: "step__heading" }, t)), this.renderToggleAndSubsteps());
   }
   /**
    * Add building or venue name to the step heading
@@ -177,7 +199,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderBicyclingStep() {
-    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())));
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())), this.renderToggleAndSubsteps());
   }
   /**
    * Render the destination step.
@@ -185,7 +207,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderDestinationStep() {
-    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { class: "step__info destination" }, e("div", { class: "step__destination" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "logo" })), e("div", { part: "step-heading", class: "step__heading" }, this.translationsData.destination)), e("div", { part: "step-location", class: "step__location" }, this.destinationLocation)));
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { class: "step__info destination" }, e("div", { class: "step__destination" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "logo" })), e("div", { part: "step-heading", class: "step__heading" }, this.translationsData.destination)), e("div", { part: "step-location", class: "step__location" }, this.destinationLocation)), this.renderToggleAndSubsteps());
   }
   /**
    * Render a transit step.
@@ -197,7 +219,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
     return e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "transit-stop" })), e("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ? e("span", { class: "step__short-name", style: {
       backgroundColor: !((t = this.stepData.transit_information.line) === null || t === void 0) && t.color ? this.stepData.transit_information.line.color : null,
       color: !((s = this.stepData.transit_information.line) === null || s === void 0) && s.text_color ? this.stepData.transit_information.line.text_color : null
-    } }, this.stepData.transit_information.line.short_name) : null, this.stepData.transit_information.headsign ? this.stepData.transit_information.headsign : null, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", this.stepData.transit_information.num_stops ? this.stepData.transit_information.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.renderToggleButton(), this.renderSubsteps());
+    } }, this.stepData.transit_information.line.short_name) : null, this.stepData.transit_information.headsign ? this.stepData.transit_information.headsign : null, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", this.stepData.transit_information.num_stops ? this.stepData.transit_information.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.renderToggleAndSubsteps());
   }
   static get watchers() {
     return {
@@ -206,7 +228,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
     };
   }
 };
-d.style = p;
+d.style = l;
 export {
   d as mi_route_instructions_step
 };

package/dist/{mi-route-instructions-step.entry-527d8816.mjs → mi-route-instructions-step.entry-7ec7064e.mjs}

@@ -1,11 +1,11 @@
-import { r, c as o, h as e } from "./reactcomponent-6ee301d4.mjs";
-import { U as a } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
-import { c as l } from "./utils-ae714467-b07fc3be.mjs";
+import { r as o, c as a, h as e } from "./reactcomponent-12565689.mjs";
+import { U as n } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
+import { c as p } from "./utils-ae714467-b07fc3be.mjs";
 import "react";
 import "react-dom";
-const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;gap:8px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;gap:8px;align-items:center}.step__info.destination{grid-auto-flow:row;justify-items:center}.step__destination{display:grid;gap:8px;align-items:center;justify-content:center;grid-auto-flow:column}.step__action-icon--circled{position:relative}.step__action-icon mi-icon{display:block;width:40px;height:40px}.step__heading{font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{grid-area:modeicon;display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{grid-area:toggle;display:flex;justify-content:center;align-items:center;transition:transform 300ms;cursor:pointer}.step__toggle--open{transform:rotate(180deg)}.step__toggle mi-icon{width:16px;height:16px;display:block;background-color:#3b82f6}.step__substeps{grid-area:substeps}', d = class {
+const l = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;gap:8px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;gap:8px;align-items:center}.step__info.destination{grid-auto-flow:row;justify-items:center}.step__destination{display:grid;gap:8px;align-items:center;justify-content:center;grid-auto-flow:column}.step__action-icon--circled{position:relative}.step__action-icon mi-icon{display:block;width:40px;height:40px}.step__heading{font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{display:grid;justify-content:center}.step__toggle mi-icon{width:24px;height:24px;display:block}.step__substeps{display:grid;gap:32px}.step__details{display:grid;gap:24px;width:100%}', d = class {
   constructor(t) {
-    r(this, t), this.stepClicked = o(this, "stepClicked", 7), this.isInternetExplorer = l(), this.step = void 0, this.stepData = void 0, this.hideIndoorSubsteps = !0, this.fromRouteContext = "", this.fromTravelMode = void 0, this.fromTransitStop = void 0, this.destinationLocation = void 0, this.unit = navigator.language === "en-US" ? a.Imperial : a.Metric, this.translations = void 0, this.translationsData = void 0, this.substepsAreOpen = !1;
+    o(this, t), this.stepClicked = a(this, "stepClicked", 7), this.substepsToggled = a(this, "substepsToggled", 7), this.isInternetExplorer = p(), this.step = void 0, this.stepData = void 0, this.hideIndoorSubsteps = !0, this.fromRouteContext = "", this.fromTravelMode = void 0, this.fromTransitStop = void 0, this.destinationLocation = void 0, this.unit = navigator.language === "en-US" ? n.Imperial : n.Metric, this.translations = void 0, this.translationsData = void 0, this.substepsAreOpen = !1;
   }
   parseStepProp() {
     this.step && (this.stepData = JSON.parse(this.step));
@@ -13,6 +13,18 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
   parseTranslationsProp() {
     this.translations && (this.translationsData = JSON.parse(this.translations));
   }
+  /**
+   * Programmatically open the substeps.
+   */
+  openSubsteps() {
+    this.substepsAreOpen = !0;
+  }
+  /**
+   * Programmatically close the substeps.
+   */
+  closeSubsteps() {
+    this.substepsAreOpen = !1;
+  }
   componentWillLoad() {
     this.parseStepProp(), this.parseTranslationsProp();
   }
@@ -89,13 +101,13 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
   getTransitVehicleIconName() {
     var t, s;
     const i = (s = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || s === void 0 ? void 0 : s.type.toLowerCase();
-    return i && ["boat", "bus", "railway", "train", "subway"].some((n) => n === i) ? i : "transit";
+    return i && ["boat", "bus", "railway", "train", "subway"].some((r) => r === i) ? i : "transit";
   }
   /**
    * Toggles visibility of sub steps (steps in steps)
    */
   toggleSubsteps() {
-    this.substepsAreOpen = !this.substepsAreOpen;
+    this.substepsToggled.emit(), this.substepsAreOpen = !this.substepsAreOpen;
   }
   /**
    * Render substeps if they should be visible.
@@ -103,9 +115,10 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderSubsteps() {
-    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver", {
-      "data-maneuver-index": s,
-      maneuver: JSON.stringify(t),
+    var t;
+    return this.substepsAreOpen === !0 ? e("div", { class: "step__substeps" }, (t = this.stepData.steps) === null || t === void 0 ? void 0 : t.map((s, i) => e("mi-route-instructions-maneuver", {
+      "data-maneuver-index": i,
+      maneuver: JSON.stringify(s),
       translations: this.translations,
       unit: this.unit,
       // @ts-ignore
@@ -122,7 +135,8 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderToggleButton() {
-    return this.stepData.steps.length <= 0 || this.hideIndoorSubsteps === !0 && this.stepData.route_context.toLowerCase() === "insidebuilding" ? null : e("span", { class: `step__toggle ${this.substepsAreOpen ? "step__toggle--open" : ""}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? "▼" : e("mi-icon", { part: "step-toggle", "icon-name": "toggle" }));
+    var t;
+    return ((t = this.stepData.steps) === null || t === void 0 ? void 0 : t.length) <= 0 ? null : e("span", { class: "step__toggle", onClick: () => this.toggleSubsteps() }, this.substepsAreOpen ? e("mi-icon", { part: "step-toggle", "icon-name": "minimize" }) : e("mi-icon", { part: "step-toggle", "icon-name": "maximize" }));
   }
   /**
    * Render distance part.
@@ -132,13 +146,21 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
   renderDistance() {
     return e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), e("br", null));
   }
+  /**
+   * Render toggle and substeps.
+   *
+   * @returns {JSX.Element}
+   */
+  renderToggleAndSubsteps() {
+    return e("div", { class: "step__details" }, this.renderToggleButton(), this.renderSubsteps());
+  }
   /**
    * Render a driving step.
    *
    * @returns {JSX.Element}
    */
   renderDrivingStep() {
-    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())));
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())), this.renderToggleAndSubsteps());
   }
   /**
    * Get display heading.
@@ -162,7 +184,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    */
   renderWalkingStep() {
     let t, s;
-    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("div", { part: "step-heading", class: "step__heading" }, t)));
+    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("div", { part: "step-heading", class: "step__heading" }, t)), this.renderToggleAndSubsteps());
   }
   /**
    * Add building or venue name to the step heading
@@ -179,7 +201,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderBicyclingStep() {
-    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())));
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading())), this.renderToggleAndSubsteps());
   }
   /**
    * Render the destination step.
@@ -187,7 +209,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
    * @returns {JSX.Element}
    */
   renderDestinationStep() {
-    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { class: "step__info destination" }, e("div", { class: "step__destination" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "logo" })), e("div", { part: "step-heading", class: "step__heading" }, this.translationsData.destination)), e("div", { part: "step-location", class: "step__location" }, this.destinationLocation)));
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, e("div", { class: "step__info destination" }, e("div", { class: "step__destination" }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "logo" })), e("div", { part: "step-heading", class: "step__heading" }, this.translationsData.destination)), e("div", { part: "step-location", class: "step__location" }, this.destinationLocation)), this.renderToggleAndSubsteps());
   }
   /**
    * Render a transit step.
@@ -199,7 +221,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
     return e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "transit-stop" })), e("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ? e("span", { class: "step__short-name", style: {
       backgroundColor: !((t = this.stepData.transit_information.line) === null || t === void 0) && t.color ? this.stepData.transit_information.line.color : null,
       color: !((s = this.stepData.transit_information.line) === null || s === void 0) && s.text_color ? this.stepData.transit_information.line.text_color : null
-    } }, this.stepData.transit_information.line.short_name) : null, this.stepData.transit_information.headsign ? this.stepData.transit_information.headsign : null, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", this.stepData.transit_information.num_stops ? this.stepData.transit_information.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.renderToggleButton(), this.renderSubsteps());
+    } }, this.stepData.transit_information.line.short_name) : null, this.stepData.transit_information.headsign ? this.stepData.transit_information.headsign : null, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", this.stepData.transit_information.num_stops ? this.stepData.transit_information.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.renderToggleAndSubsteps());
   }
   static get watchers() {
     return {
@@ -208,7 +230,7 @@ const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSyste
     };
   }
 };
-d.style = p;
+d.style = l;
 export {
   d as mi_route_instructions_step
 };

package/dist/{mi-route-instructions.entry-a1c07e37.mjs → mi-route-instructions.entry-3ba5d027.mjs}

@@ -1,4 +1,4 @@
-import { r as u, c as g, h as o, H as m } from "./reactcomponent-6ee301d4.mjs";
+import { r as u, c as g, h as o, H as m } from "./reactcomponent-12565689.mjs";
 import { R as v } from "./route-travel-mode.enum-7f4ce9c7-a9c95a83.mjs";
 import { U as f } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
 import { c as S } from "./utils-ae714467-b07fc3be.mjs";

package/dist/{mi-route-instructions.entry-863fdf04.mjs → mi-route-instructions.entry-e5bec1e9.mjs}

@@ -1,4 +1,4 @@
-import { r as u, c as g, h as s, H as v } from "./webcomponent-11ee81df.mjs";
+import { r as u, c as g, h as s, H as v } from "./webcomponent-7854dce6.mjs";
 import { R as m } from "./route-travel-mode.enum-7f4ce9c7-a9c95a83.mjs";
 import { U as f } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
 import { c as S } from "./utils-ae714467-b07fc3be.mjs";

package/dist/{mi-scroll-buttons.entry-a24ce4b9.mjs → mi-scroll-buttons.entry-084db9cf.mjs}

@@ -1,4 +1,4 @@
-import { r as o, h as e } from "./reactcomponent-6ee301d4.mjs";
+import { r as o, h as e } from "./reactcomponent-12565689.mjs";
 import "react";
 import "react-dom";
 const n = '@charset "UTF-8";a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.scroll-buttons{height:100%;width:64px;background-color:#f9fafb;border-left:solid;border-color:#e5e7eb;border-width:1px;display:flex;flex-direction:column;align-items:center;justify-content:center}.scroll-buttons .btn{margin:8px}.scroll-buttons .btn-up::after{content:"↑"}.scroll-buttons .btn-down::after{content:"↓"}', r = class {

package/dist/{mi-scroll-buttons.entry-8dd35ab8.mjs → mi-scroll-buttons.entry-e0630e16.mjs}

@@ -1,4 +1,4 @@
-import { r as o, h as e } from "./webcomponent-11ee81df.mjs";
+import { r as o, h as e } from "./webcomponent-7854dce6.mjs";
 const n = '@charset "UTF-8";a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.scroll-buttons{height:100%;width:64px;background-color:#f9fafb;border-left:solid;border-color:#e5e7eb;border-width:1px;display:flex;flex-direction:column;align-items:center;justify-content:center}.scroll-buttons .btn{margin:8px}.scroll-buttons .btn-up::after{content:"↑"}.scroll-buttons .btn-down::after{content:"↓"}', r = class {
   constructor(t) {
     o(this, t), this.scrollContainerElementRef = void 0, this.scrollLength = 100;

package/dist/{mi-search.entry-34f6d81b.mjs → mi-search.entry-01317850.mjs}

@@ -1,4 +1,4 @@
-import { r as v, c as m, h as d, H as M } from "./webcomponent-11ee81df.mjs";
+import { r as v, c as m, h as d, H as M } from "./webcomponent-7854dce6.mjs";
 import { c as f, g as D } from "./_commonjsHelpers-ba3f0406-b96e6d6a.mjs";
 var g = f(function(e, t) {
   Object.defineProperty(t, "__esModule", {

package/dist/{mi-search.entry-413f35c9.mjs → mi-search.entry-379ccb95.mjs}

@@ -1,4 +1,4 @@
-import { r as v, c as m, h as d, H as M } from "./reactcomponent-6ee301d4.mjs";
+import { r as v, c as m, h as d, H as M } from "./reactcomponent-12565689.mjs";
 import { c as f, g as D } from "./_commonjsHelpers-ba3f0406-b96e6d6a.mjs";
 import "react";
 import "react-dom";

package/dist/{mi-share-sms.entry-05347a69.mjs → mi-share-sms.entry-8ed7d053.mjs}

@@ -1,4 +1,4 @@
-import { r as a, c as i, h as e } from "./webcomponent-11ee81df.mjs";
+import { r as a, c as i, h as e } from "./webcomponent-7854dce6.mjs";
 const d = 'a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.width-none{width:0}.width-xxx-small{width:2px}.width-xx-small{width:4px}.width-x-small{width:8px}.width-small{width:12px}.width-medium{width:16px}.width-large{width:24px}.width-x-large{width:32px}.width-xx-large{width:40px}.width-xxx-large{width:48px}.width-xxxx-large{width:64px}.min-width-none{min-width:0}.min-width-xxx-small{min-width:2px}.min-width-xx-small{min-width:4px}.min-width-x-small{min-width:8px}.min-width-small{min-width:12px}.min-width-medium{min-width:16px}.min-width-large{min-width:24px}.min-width-x-large{min-width:32px}.min-width-xx-large{min-width:40px}.min-width-xxx-large{min-width:48px}.min-width-xxxx-large{min-width:64px}.max-width-none{max-width:0}.max-width-xxx-small{max-width:2px}.max-width-xx-small{max-width:4px}.max-width-x-small{max-width:8px}.max-width-small{max-width:12px}.max-width-medium{max-width:16px}.max-width-large{max-width:24px}.max-width-x-large{max-width:32px}.max-width-xx-large{max-width:40px}.max-width-xxx-large{max-width:48px}.max-width-xxxx-large{max-width:64px}.height-none{height:0}.height-xxx-small{height:2px}.height-xx-small{height:4px}.height-x-small{height:8px}.height-small{height:12px}.height-medium{height:16px}.height-large{height:24px}.height-x-large{height:32px}.height-xx-large{height:40px}.height-xxx-large{height:48px}.height-xxxx-large{height:64px}.min-height-none{min-height:0}.min-height-xxx-small{min-height:2px}.min-height-xx-small{min-height:4px}.min-height-x-small{min-height:8px}.min-height-small{min-height:12px}.min-height-medium{min-height:16px}.min-height-large{min-height:24px}.min-height-x-large{min-height:32px}.min-height-xx-large{min-height:40px}.min-height-xxx-large{min-height:48px}.min-height-xxxx-large{min-height:64px}.max-height-none{max-height:0}.max-height-xxx-small{max-height:2px}.max-height-xx-small{max-height:4px}.max-height-x-small{max-height:8px}.max-height-small{max-height:12px}.max-height-medium{max-height:16px}.max-height-large{max-height:24px}.max-height-x-large{max-height:32px}.max-height-xx-large{max-height:40px}.max-height-xxx-large{max-height:48px}.max-height-xxxx-large{max-height:64px}.debug *{outline:1px solid gold}.flex{display:flex;flex:1}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.text-decoration-none{text-decoration:none}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.margin-auto{margin-left:auto;margin-right:auto}form .inputs{margin:0 auto;width:80%;padding-top:32px;padding-bottom:32px;position:relative;display:flex;flex-direction:row;align-items:center}form .inputs span.plus-sign{position:absolute;left:16px;display:block;font-size:1rem;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#1c1917;top:50%;transform:translateY(-50%)}form .inputs input{padding-left:12px;padding-right:12px;background-color:#ffffff;border-style:solid;border-width:1px;border-radius:8px;height:48px;font-size:1.25rem;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#1c1917;box-sizing:border-box}form .inputs input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #dbeafe}form .inputs input.country-code{width:15%;min-width:88px;margin-right:16px;padding-left:32px}form .inputs input.phone-number{width:85%}form button{margin-top:32px;margin-bottom:24px}', l = class {
   constructor(t) {
     a(this, t), this.successfullySent = i(this, "successfullySent", 7), this.unsuccessfullySent = i(this, "unsuccessfullySent", 7), this.submitFormHandler = (n) => {

package/dist/{mi-share-sms.entry-87d0cc49.mjs → mi-share-sms.entry-e35f196f.mjs}

@@ -1,4 +1,4 @@
-import { r as a, c as i, h as e } from "./reactcomponent-6ee301d4.mjs";
+import { r as a, c as i, h as e } from "./reactcomponent-12565689.mjs";
 import "react";
 import "react-dom";
 const d = 'a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.width-none{width:0}.width-xxx-small{width:2px}.width-xx-small{width:4px}.width-x-small{width:8px}.width-small{width:12px}.width-medium{width:16px}.width-large{width:24px}.width-x-large{width:32px}.width-xx-large{width:40px}.width-xxx-large{width:48px}.width-xxxx-large{width:64px}.min-width-none{min-width:0}.min-width-xxx-small{min-width:2px}.min-width-xx-small{min-width:4px}.min-width-x-small{min-width:8px}.min-width-small{min-width:12px}.min-width-medium{min-width:16px}.min-width-large{min-width:24px}.min-width-x-large{min-width:32px}.min-width-xx-large{min-width:40px}.min-width-xxx-large{min-width:48px}.min-width-xxxx-large{min-width:64px}.max-width-none{max-width:0}.max-width-xxx-small{max-width:2px}.max-width-xx-small{max-width:4px}.max-width-x-small{max-width:8px}.max-width-small{max-width:12px}.max-width-medium{max-width:16px}.max-width-large{max-width:24px}.max-width-x-large{max-width:32px}.max-width-xx-large{max-width:40px}.max-width-xxx-large{max-width:48px}.max-width-xxxx-large{max-width:64px}.height-none{height:0}.height-xxx-small{height:2px}.height-xx-small{height:4px}.height-x-small{height:8px}.height-small{height:12px}.height-medium{height:16px}.height-large{height:24px}.height-x-large{height:32px}.height-xx-large{height:40px}.height-xxx-large{height:48px}.height-xxxx-large{height:64px}.min-height-none{min-height:0}.min-height-xxx-small{min-height:2px}.min-height-xx-small{min-height:4px}.min-height-x-small{min-height:8px}.min-height-small{min-height:12px}.min-height-medium{min-height:16px}.min-height-large{min-height:24px}.min-height-x-large{min-height:32px}.min-height-xx-large{min-height:40px}.min-height-xxx-large{min-height:48px}.min-height-xxxx-large{min-height:64px}.max-height-none{max-height:0}.max-height-xxx-small{max-height:2px}.max-height-xx-small{max-height:4px}.max-height-x-small{max-height:8px}.max-height-small{max-height:12px}.max-height-medium{max-height:16px}.max-height-large{max-height:24px}.max-height-x-large{max-height:32px}.max-height-xx-large{max-height:40px}.max-height-xxx-large{max-height:48px}.max-height-xxxx-large{max-height:64px}.debug *{outline:1px solid gold}.flex{display:flex;flex:1}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.text-decoration-none{text-decoration:none}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.margin-auto{margin-left:auto;margin-right:auto}form .inputs{margin:0 auto;width:80%;padding-top:32px;padding-bottom:32px;position:relative;display:flex;flex-direction:row;align-items:center}form .inputs span.plus-sign{position:absolute;left:16px;display:block;font-size:1rem;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#1c1917;top:50%;transform:translateY(-50%)}form .inputs input{padding-left:12px;padding-right:12px;background-color:#ffffff;border-style:solid;border-width:1px;border-radius:8px;height:48px;font-size:1.25rem;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#1c1917;box-sizing:border-box}form .inputs input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #dbeafe}form .inputs input.country-code{width:15%;min-width:88px;margin-right:16px;padding-left:32px}form .inputs input.phone-number{width:85%}form button{margin-top:32px;margin-bottom:24px}', l = class {

package/dist/{mi-step-switcher.entry-a35d3b34.mjs → mi-step-switcher.entry-827d5c1a.mjs}

@@ -1,4 +1,4 @@
-import { r as n, c as d, h as t, H as p } from "./reactcomponent-6ee301d4.mjs";
+import { r as n, c as d, h as t, H as p } from "./reactcomponent-12565689.mjs";
 import "react";
 import "react-dom";
 const h = ":host{display:flex}button{padding:16px;background-color:transparent;border:none}button:disabled svg{fill:#d1d5db}button svg{fill:#1f2937}div.steps{padding-top:12px;padding-bottom:12px;padding-left:4px;padding-right:4px;display:flex;flex-grow:1;flex-direction:column;vertical-align:center;justify-content:center}div.steps p{margin:0;padding-bottom:8px;color:#1c1917;font-size:1rem;font-weight:500;line-height:1.25rem;text-align:center}div.steps__dots{display:flex;justify-content:center}div.steps__dots span{width:8px;height:8px;margin-right:8px;float:left;background-color:#d1d5db;border-radius:50%}div.steps__dots span.active{background-color:#1f2937}div.steps__dots span:last-child{margin-right:0px}", o = class {

package/dist/{mi-step-switcher.entry-12abf62a.mjs → mi-step-switcher.entry-f4cab297.mjs}

@@ -1,4 +1,4 @@
-import { r as n, c as d, h as t, H as p } from "./webcomponent-11ee81df.mjs";
+import { r as n, c as d, h as t, H as p } from "./webcomponent-7854dce6.mjs";
 const h = ":host{display:flex}button{padding:16px;background-color:transparent;border:none}button:disabled svg{fill:#d1d5db}button svg{fill:#1f2937}div.steps{padding-top:12px;padding-bottom:12px;padding-left:4px;padding-right:4px;display:flex;flex-grow:1;flex-direction:column;vertical-align:center;justify-content:center}div.steps p{margin:0;padding-bottom:8px;color:#1c1917;font-size:1rem;font-weight:500;line-height:1.25rem;text-align:center}div.steps__dots{display:flex;justify-content:center}div.steps__dots span{width:8px;height:8px;margin-right:8px;float:left;background-color:#d1d5db;border-radius:50%}div.steps__dots span.active{background-color:#1f2937}div.steps__dots span:last-child{margin-right:0px}", o = class {
   constructor(e) {
     n(this, e), this.stepIndexChanged = d(this, "stepIndexChanged", 7), this.heading = void 0, this.steps = [], this.stepIndex = 0;

package/dist/{mi-tab-panel.entry-e2b46da4.mjs → mi-tab-panel.entry-226e745f.mjs}

@@ -1,4 +1,4 @@
-import { r as i, h as s } from "./reactcomponent-6ee301d4.mjs";
+import { r as i, h as s } from "./reactcomponent-12565689.mjs";
 import "react";
 import "react-dom";
 const t = 'div{display:none}div.active{font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";flex-shrink:0;flex-grow:1;display:block}', a = class {

package/dist/{mi-tab-panel.entry-10746cef.mjs → mi-tab-panel.entry-e240def9.mjs}

@@ -1,4 +1,4 @@
-import { r as i, h as s } from "./webcomponent-11ee81df.mjs";
+import { r as i, h as s } from "./webcomponent-7854dce6.mjs";
 const t = 'div{display:none}div.active{font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";flex-shrink:0;flex-grow:1;display:block}', a = class {
   constructor(e) {
     i(this, e), this.isActive = !1;

package/dist/{mi-tab.entry-6c72fc7a.mjs → mi-tab.entry-285c2799.mjs}

@@ -1,4 +1,4 @@
-import { r as t } from "./webcomponent-11ee81df.mjs";
+import { r as t } from "./webcomponent-7854dce6.mjs";
 const s = class {
   constructor(r) {
     t(this, r), this.label = void 0, this.tabFor = void 0;

package/dist/{mi-tab.entry-90e1c929.mjs → mi-tab.entry-7374bb0f.mjs}

@@ -1,4 +1,4 @@
-import { r as t } from "./reactcomponent-6ee301d4.mjs";
+import { r as t } from "./reactcomponent-12565689.mjs";
 import "react";
 import "react-dom";
 const n = class {

package/dist/{mi-tabs.entry-dbc6bd81.mjs → mi-tabs.entry-19fd0f57.mjs}

@@ -1,4 +1,4 @@
-import { r as a, h as o, H as l, g as d } from "./webcomponent-11ee81df.mjs";
+import { r as a, h as o, H as l, g as d } from "./webcomponent-7854dce6.mjs";
 const b = ':host{font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";flex-shrink:0;flex-grow:1}:host .nav{border:none;border-bottom:solid;border-color:#d1d5db;border-width:1px;padding-left:24px}:host .nav--borderless-bottom{border-bottom:0}:host .nav ul{display:flex;flex-direction:row;padding:0;margin:0;margin-bottom:-1px}:host .nav ul li{list-style:none;text-align:center;cursor:pointer;padding:16px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, 0)}:host .nav ul li.active{background-color:#f9fafb;border-color:#d1d5db;border-width:1px;border-style:solid;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;font-weight:600}:host .content{display:block;padding:16px;background-color:#f9fafb}:host .content--bordered{border-width:1px;border-color:#d1d5db;border-style:solid;border-radius:4px}', c = class {
   constructor(e) {
     a(this, e), this.active = 0, this.bordered = !1, this.tabs = void 0;

package/dist/{mi-tabs.entry-713b336a.mjs → mi-tabs.entry-f9b0d094.mjs}

@@ -1,4 +1,4 @@
-import { r as a, h as o, H as l, g as d } from "./reactcomponent-6ee301d4.mjs";
+import { r as a, h as o, H as l, g as d } from "./reactcomponent-12565689.mjs";
 import "react";
 import "react-dom";
 const b = ':host{font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";flex-shrink:0;flex-grow:1}:host .nav{border:none;border-bottom:solid;border-color:#d1d5db;border-width:1px;padding-left:24px}:host .nav--borderless-bottom{border-bottom:0}:host .nav ul{display:flex;flex-direction:row;padding:0;margin:0;margin-bottom:-1px}:host .nav ul li{list-style:none;text-align:center;cursor:pointer;padding:16px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, 0)}:host .nav ul li.active{background-color:#f9fafb;border-color:#d1d5db;border-width:1px;border-style:solid;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;font-weight:600}:host .content{display:block;padding:16px;background-color:#f9fafb}:host .content--bordered{border-width:1px;border-color:#d1d5db;border-style:solid;border-radius:4px}', c = class {

package/dist/mi-time.entry-2ac1d333.mjs

@@ -0,0 +1,45 @@
+import { r as e, h as l } from "./reactcomponent-12565689.mjs";
+import "react";
+import "react-dom";
+const D = class {
+  constructor(t) {
+    e(this, t), this.seconds = void 0, this.translations = void 0, this.translationsData = void 0;
+  }
+  setTranslations() {
+    this.translations ? this.translationsData = JSON.parse(this.translations) : this.translationsData = { days: "d", hours: "h", minutes: "min" };
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  /**
+   * Get display string in days, hours, and minutes, eg. "1 d 23 h 4 min".
+   * Minimum display value is 1 minute.
+   *
+   * @param {number} seconds Duration in seconds.
+   * @returns {string}
+   */
+  getDurationDisplayString(t) {
+    const n = Math.floor(t / 86400), a = Math.floor(t % 86400 / 3600), i = Math.floor(t % 86400 % 3600 / 60), r = n > 0 ? `${n} ${this.translationsData.days} ` : "", o = a > 0 ? `${a} ${this.translationsData.hours} ` : "";
+    let s = i > 0 ? `${i} ${this.translationsData.minutes}` : "";
+    return !r && !o && !s && (s = "1 min"), `${r}${o}${s}`.trim();
+  }
+  render() {
+    return this.seconds >= 0 && this.translationsData ? this.renderDuration() : null;
+  }
+  /**
+   * Render formatted duration string.
+   *
+   * @returns {JSX.Element}
+   */
+  renderDuration() {
+    return l("span", null, this.getDurationDisplayString(this.seconds));
+  }
+  static get watchers() {
+    return {
+      translations: ["setTranslations"]
+    };
+  }
+};
+export {
+  D as mi_time
+};