utopia-ui 3.0.83 → 3.0.84

package/dist/index.d.ts

@@ -1,42 +1,71 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GeoJsonObject, Geometry, Point } from 'geojson';
 export { Point } from 'geojson';
-import { LatLng } from 'leaflet';
-export { Popup } from 'leaflet';
+import * as react from 'react';
 import { Key } from 'react';
 export { default as SVG } from 'react-inlinesvg';
+export { Popup } from 'leaflet';
 
 /**
- * @category Types
- */
-interface Tag {
-  color: string
-  id: string
-  name: string
-  offer_or_need?: boolean
-}
-
-interface UtopiaMapProps {
-  height?: string
-  width?: string
-  center?: [number, number]
-  zoom?: number
-  tags?: Tag[]
-  children?: React.ReactNode
-  geo?: GeoJsonObject
-  showFilterControl?: boolean
-  showLayerControl?: boolean
-  showGratitudeControl?: boolean
-  showThemeControl?: boolean
-  infoText?: string
-  donationWidget?: boolean
-  defaultTheme?: string
-}
-
-/**
+ * This component creates the map.
+ * ```tsx
+ *   <UtopiaMap center={[50.6, 9.5]} zoom={5} height="100dvh" width="100dvw" />
+ *  ```
+ * You can define its {@link Layer | `Layers`}  as supcomponents.
+ * ```tsx
+ *     <UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
+ *       <Layer
+ *         name="events"
+ *         markerIcon="calendar"
+ *         markerShape="square"
+ *         markerDefaultColor="#700"
+ *         data={events}
+ *       />
+ *       <Layer
+ *         name="places"
+ *         markerIcon="point"
+ *         markerShape="circle"
+ *         markerDefaultColor="#007"
+ *         data={places}
+ *       />
+ *     </UtopiaMap>
+ *  ```
+ * You can also pass {@link Tags | `Tags`}  or {@link Permissions | `Permissions`}  as subcomponents.
+ * ```tsx
+ *     <UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
+ *       ...
+ *       <Tags data={tags} />
+ *       <Permissions data={permissions} />
+ *     </UtopiaMap>
+ * ```
  * @category Map
  */
-declare function UtopiaMap({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, showThemeControl, defaultTheme, infoText, donationWidget, }: UtopiaMapProps): react_jsx_runtime.JSX.Element;
+declare function UtopiaMap({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, showThemeControl, defaultTheme, donationWidget, }: {
+    /** height of the map (default '500px') */
+    height?: string;
+    /** width of the map (default '100%') */
+    width?: string;
+    /** initial centered position of the map (default [50.6, 9.5]) */
+    center?: [number, number];
+    /** initial zoom level of the map (default 10) */
+    zoom?: number;
+    /** React child-components */
+    children?: React.ReactNode;
+    /** GeoJSON to display on the map */
+    geo?: GeoJsonObject;
+    /** show the filter control widget (default false) */
+    showFilterControl?: boolean;
+    /** show the gratitude control widget (default false) */
+    showLayerControl?: boolean;
+    /** show the layer control widget (default true) */
+    showGratitudeControl?: boolean;
+    /** show a widget to switch the theme */
+    showThemeControl?: boolean;
+    /** the defaut theme */
+    defaultTheme?: string;
+    /** ask to donate to the Utopia Project OpenCollective campaign (default false) */
+    donationWidget?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * @category Types
@@ -148,14 +177,6 @@ interface Item {
   } */
 }
 
-interface ItemFormPopupProps {
-  position: LatLng
-  layer: LayerProps
-  item?: Item
-  children?: React.ReactNode
-  setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
-}
-
 interface ItemType {
   name: string
   show_name_input: boolean
@@ -197,20 +218,79 @@ interface LayerProps {
   public_edit_items?: boolean
   listed?: boolean
   item_presets?: Record<string, unknown>
-  setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
-  itemFormPopup?: ItemFormPopupProps | null
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  clusterRef?: any
 }
 
 /**
- * @category Map
+ * Tags are used to tag items within the app and the map and to filter by keywords. Every tag has a color.
+ * @example
+ * ```ts
+ * export const tags: Tag[] = [
+ *  { 
+ *   "id": "e19f46a7-77a4-4a50-99a2-a942dce843a3",
+ *   "name": "nature",
+ *   "color": "#9bc53d"
+ * },
+ * {
+ *   "id": "2c2099a6-23ac-4308-b91c-86eefeff3a1d",
+ *   "name": "utopia",
+ *   "color": "#c3423f"
+ * },
+ * {
+ *   "id": "48b2de97-2b9e-432b-b230-7bdc9a5fb6c0",
+ *   "name": "map",
+ *   "color": "#5bc0eb"
+ * },
+ * {
+ *   "id": "c88f52e6-357b-45fb-a171-9c2b1dceeb8e",
+ *   "name": "food",
+ *   "color": "#6761a8"
+ * },
+ * {
+ *   "id": "8928cb92-a3c1-4d83-9495-c2eb4fac0bbe",
+ *   "name": "permaculture",
+ *   "color": "#44344f"
+ * },
+ *];
+```
+ * @category Types
  */
-declare const Layer: ({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, userProfileLayer, customEditLink, customEditParameter, public_edit_items, listed, setItemFormPopup, itemFormPopup, clusterRef, }: LayerProps) => react_jsx_runtime.JSX.Element;
+interface Tag {
+  color: string
+  id: string
+  name: string
+  offer_or_need?: boolean
+}
 
 /**
  * @category Map
  */
+declare const Layer: ({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, userProfileLayer, customEditLink, customEditParameter, public_edit_items, listed, }: LayerProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * This Components injects Tags comming from an {@link ItemsApi | `API`}
+ * ```tsx
+ * <Tags api={tagsApi} />
+ * ```
+ * or from on {@link Tag| `Array`}
+ * ```tsx
+ * <Tags data={tags} />
+ * ```
+ * Can be child of {@link AppShell | `AppShell`}
+ * ```tsx
+ * <AppShell>
+ *     ...
+ *     <Tags api={tagsApi} />
+ * </AppShell>
+ *  ```
+ * Or child of {@link UtopiaMap | `UtopiaMap`}
+ * ```tsx
+ * <UtopiaMap>
+ *     ...
+ *     <Tags api={tagsApi} />
+ * </UtopiaMap>
+ * ```
+ * @category Map
+ */
 declare function Tags({ data, api }: {
     data?: Tag[];
     api?: ItemsApi<Tag>;
@@ -242,111 +322,38 @@ interface Permission {
 }
 
 /**
- * @category Types
+ * This Components injects Permissions comming from an {@link ItemsApi | `API`}
+ * ```tsx
+ * <Permissions api={itemsApiInstance} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * ```
+ * or from on {@link Permission| `Array`}
+ * ```tsx
+ * <Permissions data={permissions} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * ```
+ * Can be child of {@link AppShell | `AppShell`}
+ * ```tsx
+ * <AppShell>
+ *     ...
+ *     <Permissions api={itemsApiInstance} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * </AppShell>
+ *  ```
+ * Or child of {@link UtopiaMap | `UtopiaMap`}
+ * ```tsx
+ * <UtopiaMap>
+ *     ...
+ *     <Permissions api={itemsApiInstance} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * </UtopiaMap>
+ * ```
+ * @category Map
  */
-interface PermissionsProps {
+declare function Permissions({ data, api, adminRole, }: {
+    /** Array with all the permissions inside */
     data?: Permission[];
+    /** API to fetch all the permissions from a server */
     api?: ItemsApi<Permission>;
+    /** UUID of the admin role which has always all the permissions */
     adminRole?: string;
-}
-
-/**
- * @category Map
- */
-declare function Permissions({ data, api, adminRole }: PermissionsProps): react_jsx_runtime.JSX.Element;
-
-/**
- * @category Map
- */
-declare const ItemForm: {
-    ({ children, item, title, setPopupTitle, }: {
-        children?: React.ReactNode;
-        item?: Item;
-        title?: string;
-        setPopupTitle?: React.Dispatch<React.SetStateAction<string>>;
-    }): react_jsx_runtime.JSX.Element;
-    __TYPE: string;
-};
-
-/**
- * @category Map
- */
-declare const ItemView: {
-    ({ children, item }: {
-        children?: React.ReactNode;
-        item?: Item;
-    }): react_jsx_runtime.JSX.Element;
-    __TYPE: string;
-};
-
-/**
- * @category Map
- */
-declare const PopupTextAreaInput: ({ dataField, placeholder, style, item, }: {
-    dataField: string;
-    placeholder: string;
-    style?: string;
-    item?: Item;
-}) => react_jsx_runtime.JSX.Element;
-
-interface StartEndInputProps {
-    item?: Item;
-    showLabels?: boolean;
-    updateStartValue?: (value: string) => void;
-    updateEndValue?: (value: string) => void;
-}
-/**
- * @category Map
- */
-declare const PopupStartEndInput: ({ item, showLabels, updateStartValue, updateEndValue, }: StartEndInputProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * @category Map
- */
-declare const PopupTextInput: ({ dataField, placeholder, style, item, }: {
-    dataField: string;
-    placeholder: string;
-    style?: string;
-    item?: Item;
-}) => react_jsx_runtime.JSX.Element;
-
-/**
- * @category Map
- */
-declare const PopupCheckboxInput: ({ dataField, label, item, }: {
-    dataField: string;
-    label: string;
-    item?: Item;
-}) => react_jsx_runtime.JSX.Element;
-
-/**
- * @category Map
- */
-declare const TextView: ({ item, itemId, text, truncate, rawText, itemTextField, }: {
-    item?: Item;
-    itemId?: string;
-    text?: string;
-    truncate?: boolean;
-    rawText?: string;
-    itemTextField?: string;
-}) => react_jsx_runtime.JSX.Element;
-
-/**
- * @category Map
- */
-declare const StartEndView: ({ item }: {
-    item?: Item;
-}) => react_jsx_runtime.JSX.Element;
-
-/**
- * @category Map
- */
-declare const PopupButton: ({ url, parameterField, text, item, }: {
-    url: string;
-    parameterField?: string;
-    text: string;
-    item?: Item;
-}) => react_jsx_runtime.JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * @category Types
@@ -563,6 +570,63 @@ interface InputTextProps {
  */
 declare function TextInput({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, pattern, required, updateFormValue, }: InputTextProps): react_jsx_runtime.JSX.Element;
 
+interface StartEndInputProps {
+    item?: Item;
+    showLabels?: boolean;
+    updateStartValue?: (value: string) => void;
+    updateEndValue?: (value: string) => void;
+}
+
+/**
+ * @category Item
+ */
+declare const PopupForm: ({ children }: {
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * @category Item
+ */
+declare const PopupView: ({ children }: {
+    children?: React.ReactNode;
+}) => (react_jsx_runtime.JSX.Element | null)[];
+
+declare const TextView: react.ComponentType<Omit<{
+    item?: Item;
+    itemId?: string;
+    text?: string;
+    truncate?: boolean;
+    rawText?: string;
+    itemTextField?: string;
+}, "item">>;
+declare const StartEndView: react.ComponentType<Omit<{
+    item?: Item;
+}, "item">>;
+declare const PopupTextInput: react.ComponentType<Omit<{
+    dataField: string;
+    placeholder: string;
+    style?: string;
+    item?: Item;
+}, "item">>;
+declare const PopupButton: react.ComponentType<Omit<{
+    url: string;
+    parameterField?: string;
+    text: string;
+    item?: Item;
+}, "item">>;
+declare const PopupCheckboxInput: react.ComponentType<Omit<{
+    dataField: string;
+    label: string;
+    item?: Item;
+}, "item">>;
+declare const PopupTextAreaInput: react.ComponentType<Omit<{
+    dataField: string;
+    placeholder: string;
+    style?: string;
+    item?: Item;
+}, "item">>;
+declare const PopupStartEndInput: react.ComponentType<Omit<StartEndInputProps, "item">>;
+
 declare global {
     interface Window {
         my_modal_3: {
@@ -571,4 +635,4 @@ declare global {
     }
 }
 
-export { AppShell, type AssetsApi, AttestationForm, AuthProvider, CardPage, Content, type Item, ItemForm, ItemView, type ItemsApi, Layer, type LayerProps, LoginPage, MapOverlayPage, MarketView, Modal, OverlayItemsIndexPage, type Permission, Permissions, type PermissionsProps, PopupButton, PopupCheckboxInput, PopupStartEndInput, PopupTextAreaInput, PopupTextInput, ProfileForm, ProfileView, Quests, RequestPasswordPage, SelectUser, SetNewPasswordPage, SideBar, SignupPage, StartEndView, type Tag, Tags, TextAreaInput, TextInput, TextView, TitleCard, type UserApi, type UserItem, UserSettings, UtopiaMap };
+export { AppShell, type AssetsApi, AttestationForm, AuthProvider, CardPage, Content, type Item, type ItemsApi, Layer, type LayerProps, LoginPage, MapOverlayPage, MarketView, Modal, OverlayItemsIndexPage, type Permission, Permissions, PopupButton, PopupCheckboxInput, PopupForm, PopupStartEndInput, PopupTextAreaInput, PopupTextInput, PopupView, ProfileForm, ProfileView, Quests, RequestPasswordPage, SelectUser, SetNewPasswordPage, SideBar, SignupPage, StartEndView, type Tag, Tags, TextAreaInput, TextInput, TextView, TitleCard, type UserApi, type UserItem, UserSettings, UtopiaMap };

package/dist/index.esm.js

@@ -72,7 +72,7 @@ styleInject(css_248z$4);
 var css_248z$3 = ".fade {\n    mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent);\n}\n\n.placeholder-center::placeholder {\n    text-align: center;\n}\n\ninput {\n    box-sizing: border-box;\n}\n\ntextarea {\n    box-sizing: border-box;\n}\n\n.crosshair-cursor-enabled {\n    cursor: crosshair;\n}\n\n.marker-cluster span {\n    color: #000;\n}";
 styleInject(css_248z$3);
 
-var css_248z$2 = ".calendar-icon {\n    position: relative;\n    top: -35px;\n    left: 10px;\n    width: 13px;\n}\n\n.user-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n}\n\n.circle-icon {\n    position: relative;\n    top: -33px;\n    left: 10px;\n    width: 13px;\n}\n\n.fire-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n}\n\n.tree-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n}\n\n.music-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.quest-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}\n\n.drum-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n}\n\n.compass-icon {\n    position: relative;\n    top: -36.5px;\n    left: 4px;\n    width: 24px;\n}\n\n.group-icon {\n    position: relative;\n    top: -37px;\n    left: 4px;\n    width: 24px;\n}\n\n.liebevoll-jetzt-icon{\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.staff-snake-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.flower-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.network-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.shop-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}\n\n.plant-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}\n\n.circle-dot-icon {\n    position: relative;\n    top: -36px;\n    left: 4px;\n    width: 24px;\n}";
+var css_248z$2 = ".calendar-icon {\n    position: relative;\n    top: -35px;\n    left: 10px;\n    width: 13px;\n}\n\n.user-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n}\n\n.circle-icon {\n    position: relative;\n    top: -33px;\n    left: 10px;\n    width: 13px;\n}\n\n.fire-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n}\n\n.tree-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n}\n\n.music-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.quest-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}\n\n.drum-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n}\n\n.compass-icon {\n    position: relative;\n    top: -36.5px;\n    left: 4px;\n    width: 24px;\n}\n\n.group-icon {\n    position: relative;\n    top: -37px;\n    left: 4px;\n    width: 24px;\n}\n\n.liebevoll-jetzt-icon{\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.staff-snake-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.flower-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.network-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n}\n\n.shop-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}\n\n.plant-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}\n\n.circle-dot-icon {\n    position: relative;\n    top: -36px;\n    left: 4px;\n    width: 24px;\n}\n\n.steps-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n}";
 styleInject(css_248z$2);
 
 var css_248z$1 = ".leaflet-control-attribution {\n    display: none;\n}\n\n.leaflet-control-locate {\n    display: none;\n}\n\n.leaflet-data-marker {\n    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n    background-position: 6px 32px;\n}\n\n.leaflet-container {\n    cursor: inherit;\n}\n\n.leaflet-popup-scrolled {\n    overflow-x: hidden;\n}\n\n.leaflet-popup-content-wrapper, .leaflet-popup-tip{\n    background-color: var(--color-base-100);\n    color: var(--color-base-content);\n    border-radius: var(--radius-box);\n}\n\n.leaflet-tooltip {\n    background-color: var(--color-base-100);\n    color: var(--color-base-content);\n    border-width: 0px;\n}\n\n.leaflet-tooltip {\n    border-radius: var(--radius-box);\n    transition: opacity 500ms;\n    transition-delay: 50ms;\n}\n\n.leaflet-tooltip::before {\n    border-top-color: var(--color-base-100);\n}\n\n.leaflet-container {\n    text-align: left;\n    background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    background-position: 50% 80%;\n}\n\n.leaflet-popup-close-button span {\n    color: var(--color-base-content);\n    opacity: 50%;\n}";
@@ -1428,6 +1428,8 @@ const addIcon = (icon) => {
             return '<svg class="circle-dot-icon" stroke="#fff" fill="transparent" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1.55em" width="1.55em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="1"></circle></svg>';
         case 'cannabis':
             return '<svg class="network-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 512 512" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M256 0c5.3 0 10.3 2.7 13.3 7.1c15.8 23.5 36.7 63.7 49.2 109c7.2 26.4 11.8 55.2 10.4 84c11.5-8.8 23.7-16.7 35.8-23.6c41-23.3 84.4-36.9 112.2-42.5c5.2-1 10.7 .6 14.4 4.4s5.4 9.2 4.4 14.5c-5.6 27.7-19.3 70.9-42.7 111.7c-9.1 15.9-19.9 31.7-32.4 46.3c27.8 6.6 52.4 17.3 67.2 25.5c5.1 2.8 8.2 8.2 8.2 14s-3.2 11.2-8.2 14c-15.2 8.4-40.9 19.5-69.8 26.1c-20.2 4.6-42.9 7.2-65.2 4.6l8.3 33.1c1.5 6.1-.6 12.4-5.5 16.4s-11.6 4.6-17.2 1.9L280 417.2l0 70.8c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-70.8-58.5 29.1c-5.6 2.8-12.3 2.1-17.2-1.9s-7-10.3-5.5-16.4l8.3-33.1c-22.2 2.6-45 0-65.2-4.6c-28.9-6.6-54.6-17.6-69.8-26.1c-5.1-2.8-8.2-8.2-8.2-14s3.2-11.2 8.2-14c14.8-8.2 39.4-18.8 67.2-25.5C78.9 296.3 68.1 280.5 59 264.6c-23.4-40.8-37.1-84-42.7-111.7c-1.1-5.2 .6-10.7 4.4-14.5s9.2-5.4 14.4-4.4c27.9 5.5 71.2 19.2 112.2 42.5c12.1 6.9 24.3 14.7 35.8 23.6c-1.4-28.7 3.1-57.6 10.4-84c12.5-45.3 33.4-85.5 49.2-109c3-4.4 8-7.1 13.3-7.1z"></path></svg>';
+        case 'steps':
+            return '<svg class="steps-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 512 512" height="1.4em" width="1.4em" xmlns="http://www.w3.org/2000/svg"><path d="M133.83 361.27c-22.61 0-41-8.17-54.79-24.39s-22.84-40.29-28.11-75.31c-7.76-51.61-.06-95.11 21.68-122.48 12.8-16.12 29.6-25.44 48.58-26.94 16.25-1.3 40.54 5.29 64 44 14.69 24.24 25.86 56.44 30.65 88.34 5.79 38.51 1.48 66.86-13.18 86.65-11.64 15.72-29.54 25.46-53.21 29a106.46 106.46 0 0 1-15.62 1.13zM173 496c-13.21 0-26.6-4.23-38.66-12.36a79.79 79.79 0 0 1-33.52-50.6c-2.85-14.66-1.14-26.31 5.22-35.64 10.33-15.15 28.87-18.56 48.49-22.18 2.07-.38 4.17-.76 6.3-1.17 4.52-.86 9.14-2 13.62-3.11 16.78-4.14 34.14-8.43 48.47 1.75 9.59 6.8 15 18.36 16.62 35.32 1.84 19.57-2.36 39.1-11.83 55-10.19 17.11-25.47 28.42-43 31.86A61 61 0 0 1 173 496zm205.17-230.73a106.69 106.69 0 0 1-15.6-1.2c-23.66-3.5-41.56-13.25-53.2-29-14.66-19.79-19-48.13-13.18-86.65 4.79-31.93 15.93-64.1 30.55-88.25 23.34-38.57 47.66-45.26 64-44.08 18.92 1.38 35.69 10.57 48.51 26.6 21.89 27.37 29.65 71 21.86 122.84-5.27 35-14.2 58.95-28.11 75.31s-32.22 24.43-54.83 24.43zM339 400a61 61 0 0 1-11.68-1.13c-17.56-3.44-32.84-14.75-43-31.86-9.47-15.9-13.67-35.43-11.83-55 1.6-17 7-28.52 16.62-35.33 14.33-10.17 31.69-5.89 48.47-1.74 4.48 1.1 9.1 2.24 13.62 3.11l6.29 1.17c19.63 3.61 38.17 7 48.5 22.17 6.36 9.33 8.07 21 5.22 35.64a79.78 79.78 0 0 1-33.52 50.61C365.56 395.78 352.17 400 339 400z"></path></svg>';
         default:
             return '';
     }