@rpg-engine/long-bow 0.6.10 → 0.6.13

package/dist/components/Tutorial/TutorialStepper.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { CSSProperties } from 'styled-components';
 export interface ITutorialLesson {
     title: string;
     body?: React.ReactNode | string;
     text?: string;
     image: string;
+    imageStyle?: CSSProperties;
 }
 export interface ITutorialStepperProps {
     lessons: ITutorialLesson[];

package/dist/long-bow.cjs.development.js

@@ -20028,10 +20028,20 @@ var TutorialStepper = function TutorialStepper(_ref) {
   var generateLessons = function generateLessons() {
     return lessons.map(function (lesson, index) {
       return {
-        component: React__default.createElement("div", null, React__default.createElement("h1", null, lesson.title), lesson.image && React__default.createElement(LessonImage, null, React__default.createElement("img", {
+        component: React__default.createElement(LessonContainer, {
+          key: index,
+          className: "lesson-container"
+        }, React__default.createElement(LessonTitle, {
+          className: "lesson-title"
+        }, lesson.title), lesson.image && React__default.createElement(LessonImage, {
+          className: "lesson-image",
+          style: lesson.imageStyle
+        }, React__default.createElement("img", {
           src: lesson.image,
           alt: lesson.title
-        })), lesson.body && React__default.createElement(LessonBody, null, lesson.body), lesson.text && React__default.createElement(DynamicText, {
+        })), lesson.body && React__default.createElement(LessonBody, {
+          className: "lesson-body"
+        }, lesson.body), lesson.text && React__default.createElement(DynamicText, {
           text: lesson.text
         })),
         id: index
@@ -20060,7 +20070,15 @@ var Container$y = /*#__PURE__*/styled__default.div.withConfig({
 var LessonImage = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonImage",
   componentId: "sc-7tgzv2-2"
-})(["display:flex;justify-content:center;align-items:center;img{width:600px;height:400px;border-radius:10px;}"]);
+})(["display:flex;justify-content:center;align-items:center;width:100%;height:auto;max-width:600px;margin:auto;img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}"]);
+var LessonTitle = /*#__PURE__*/styled__default.h1.withConfig({
+  displayName: "TutorialStepper__LessonTitle",
+  componentId: "sc-7tgzv2-3"
+})([""]);
+var LessonContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TutorialStepper__LessonContainer",
+  componentId: "sc-7tgzv2-4"
+})([""]);
 
 exports.AsyncDropdown = AsyncDropdown;
 exports.Button = Button;