Move modals and rename classes to match file names (#1367)

## Launch Checklist

I've created a folder for modals and moved them all inside.
I removed the icons which were small files with no real benefit and
moved the icons to where they were used.
I fixed an issue with the close button position in modal.
I've added missing translation to "Links" in debug modal.

Before: 

<img width="610" height="81" alt="image"
src="https://github.com/user-attachments/assets/dd7520f6-9634-4ff1-a83d-99ceae7c9144"
/>

After:
<img width="610" height="81" alt="image"
src="https://github.com/user-attachments/assets/fe3a2ccf-6c09-42ab-bf6f-dd30d3c68e13"
/>


 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [ ] Add an entry to `CHANGELOG.md` under the `## main` section.

src/components/App.tsx

@@ -18,12 +18,12 @@ import AppToolbar, { MapState } from './AppToolbar'
 import AppLayout from './AppLayout'
 import MessagePanel from './AppMessagePanel'
 
-import ModalSettings from './ModalSettings'
-import ModalExport from './ModalExport'
-import ModalSources from './ModalSources'
-import ModalOpen from './ModalOpen'
-import ModalShortcuts from './ModalShortcuts'
-import ModalDebug from './ModalDebug'
+import ModalSettings from './modals/ModalSettings'
+import ModalExport from './modals/ModalExport'
+import ModalSources from './modals/ModalSources'
+import ModalOpen from './modals/ModalOpen'
+import ModalShortcuts from './modals/ModalShortcuts'
+import ModalDebug from './modals/ModalDebug'
 
 import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
 import style from '../libs/style'

src/components/FieldArray.tsx

@@ -1,4 +1,4 @@
-import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
+import InputArray, { InputArrayProps } from './InputArray'
 import Fieldset from './Fieldset'
 
 type FieldArrayProps = InputArrayProps & {

src/components/FieldDynamicArray.tsx

@@ -1,4 +1,4 @@
-import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
+import InputDynamicArray, {InputDynamicArrayProps} from './InputDynamicArray'
 import Fieldset from './Fieldset'
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {

src/components/FieldSpec.tsx

@@ -1,5 +1,5 @@
 import Block from './Block'
-import InputSpec, { SpecFieldProps as InputFieldSpecProps } from './InputSpec'
+import InputSpec, { InputSpecProps } from './InputSpec'
 import Fieldset from './Fieldset'
 
 
@@ -15,11 +15,11 @@ const typeMap = {
   padding: () => Block,
 };
 
-export type SpecFieldProps = InputFieldSpecProps & {
+export type FieldSpecProps = InputSpecProps & {
   name?: string
 };
 
-const SpecField: React.FC<SpecFieldProps> = (props) => {
+const FieldSpec: React.FC<FieldSpecProps> = (props) => {
   const fieldType = props.fieldSpec?.type;
 
   const typeBlockFn = typeMap[fieldType!];
@@ -40,4 +40,4 @@ const SpecField: React.FC<SpecFieldProps> = (props) => {
   );
 };
 
-export default SpecField;
+export default FieldSpec;

src/components/IconBackground.tsx

@@ -1,10 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { BsDiamondFill } from 'react-icons/bs';
-
-const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <BsDiamondFill {...props} />
-  )
-}
-
-export default IconBackground;

src/components/IconCircle.tsx

@@ -1,9 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import {MdOutlineCircle} from 'react-icons/md'
-
-const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <MdOutlineCircle {...props} />
-  )
-}
-export default IconCircle;

src/components/IconFill.tsx

@@ -1,10 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { BsDiamond } from 'react-icons/bs';
-
-
-const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <BsDiamond {...props} />
-  )
-}
-export default IconFill;

src/components/IconLayer.tsx

@@ -1,12 +1,9 @@
 import React from 'react'
 
-import IconLine from './IconLine'
-import IconFill from './IconFill'
-import IconSymbol from './IconSymbol'
-import IconBackground from './IconBackground'
-import IconCircle from './IconCircle'
-import IconMissing from './IconMissing'
 import type {CSSProperties} from 'react'
+import { BsDiamond, BsDiamondFill, BsFonts } from 'react-icons/bs'
+import { MdOutlineCircle, MdPriorityHigh } from 'react-icons/md'
+import { IoAnalyticsOutline } from 'react-icons/io5'
 
 type IconLayerProps = {
   type: string
@@ -17,16 +14,16 @@ type IconLayerProps = {
 const IconLayer: React.FC<IconLayerProps> = (props) => {
   const iconProps = { style: props.style }
   switch(props.type) {
-  case 'fill-extrusion': return <IconBackground {...iconProps} />
-  case 'raster': return <IconFill {...iconProps} />
-  case 'hillshade': return <IconFill {...iconProps} />
-  case 'heatmap': return <IconFill {...iconProps} />
-  case 'fill': return <IconFill {...iconProps} />
-  case 'background': return <IconBackground {...iconProps} />
-  case 'line': return <IconLine {...iconProps} />
-  case 'symbol': return <IconSymbol {...iconProps} />
-  case 'circle': return <IconCircle {...iconProps} />
-  default: return <IconMissing {...iconProps} />
+  case 'fill-extrusion': return <BsDiamondFill {...iconProps} />
+  case 'raster': return <BsDiamond {...iconProps} />
+  case 'hillshade': return <BsDiamond {...iconProps} />
+  case 'heatmap': return <BsDiamond {...iconProps} />
+  case 'fill': return <BsDiamond {...iconProps} />
+  case 'background': return <BsDiamondFill {...iconProps} />
+  case 'line': return <IoAnalyticsOutline {...iconProps} />
+  case 'symbol': return <BsFonts {...iconProps} />
+  case 'circle': return <MdOutlineCircle {...iconProps} />
+  default: return <MdPriorityHigh {...iconProps} />
   }
 }
 

src/components/IconLine.tsx

@@ -1,11 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { IoAnalyticsOutline } from 'react-icons/io5';
-
-
-const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <IoAnalyticsOutline {...props} />
-  )
-}
-
-export default IconLine;

src/components/IconMissing.tsx

@@ -1,9 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import {MdPriorityHigh} from 'react-icons/md'
-
-const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <MdPriorityHigh {...props} />
-  )
-}
-export default IconMissing;

src/components/IconSymbol.tsx

@@ -1,10 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { BsFonts } from 'react-icons/bs';
-
-
-const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <BsFonts {...props} />
-  )
-}
-export default IconSymbol;

src/components/InputArray.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import InputString from './InputString'
 import InputNumber from './InputNumber'
 
-export type FieldArrayProps = {
+export type InputArrayProps = {
   value: (string | number | undefined)[]
   type?: string
   length?: number
@@ -12,18 +12,18 @@ export type FieldArrayProps = {
   label?: string
 };
 
-type FieldArrayState = {
+type InputArrayState = {
   value: (string | number | undefined)[]
   initialPropsValue: unknown[]
 }
 
-export default class FieldArray extends React.Component<FieldArrayProps, FieldArrayState> {
+export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
   static defaultProps = {
     value: [],
     default: [],
   }
 
-  constructor (props: FieldArrayProps) {
+  constructor (props: InputArrayProps) {
     super(props);
     this.state = {
       value: this.props.value.slice(0),
@@ -32,7 +32,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
     };
   }
 
-  static getDerivedStateFromProps(props: Readonly<FieldArrayProps>, state: FieldArrayState) {
+  static getDerivedStateFromProps(props: Readonly<InputArrayProps>, state: InputArrayState) {
     const value: any[] = [];
     const initialPropsValue = state.initialPropsValue.slice(0);
 

src/components/InputDynamicArray.tsx

@@ -11,7 +11,7 @@ import InputEnum from './InputEnum'
 import InputUrl from './InputUrl'
 
 
-export type FieldDynamicArrayProps = {
+export type InputDynamicArrayProps = {
   value?: (string | number | undefined)[]
   type?: 'url' | 'number' | 'enum' | 'string'
   default?: (string | number | undefined)[]
@@ -24,9 +24,9 @@ export type FieldDynamicArrayProps = {
   label: string
 }
 
-type FieldDynamicArrayInternalProps = FieldDynamicArrayProps & WithTranslation;
+type InputDynamicArrayInternalProps = InputDynamicArrayProps & WithTranslation;
 
-class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInternalProps> {
+class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInternalProps> {
   changeValue(idx: number, newValue: string | number | undefined) {
     const values = this.values.slice(0)
     values[idx] = newValue
@@ -131,8 +131,8 @@ class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInterna
   }
 }
 
-const FieldDynamicArray = withTranslation()(FieldDynamicArrayInternal);
-export default FieldDynamicArray;
+const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
+export default InputDynamicArray;
 
 type DeleteValueInputButtonProps = {
   onClick?(...args: unknown[]): unknown

src/components/InputFont.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import InputAutocomplete from './InputAutocomplete'
 
-export type FieldFontProps = {
+export type InputFontProps = {
   name: string
   value?: string[]
   default?: string[]
@@ -11,7 +11,7 @@ export type FieldFontProps = {
   'aria-label'?: string
 };
 
-export default class FieldFont extends React.Component<FieldFontProps> {
+export default class InputFont extends React.Component<InputFontProps> {
   static defaultProps = {
     fonts: []
   }

src/components/InputSpec.tsx

@@ -4,16 +4,16 @@ import InputColor, { InputColorProps } from './InputColor'
 import InputNumber, { InputNumberProps } from './InputNumber'
 import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
 import InputString, { InputStringProps } from './InputString'
-import InputArray, { FieldArrayProps } from './InputArray'
-import InputDynamicArray, { FieldDynamicArrayProps } from './InputDynamicArray'
-import InputFont, { FieldFontProps } from './InputFont'
+import InputArray, { InputArrayProps } from './InputArray'
+import InputDynamicArray, { InputDynamicArrayProps } from './InputDynamicArray'
+import InputFont, { InputFontProps } from './InputFont'
 import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
 import InputEnum, { InputEnumProps } from './InputEnum'
 import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
-export type SpecFieldProps = {
+export type InputSpecProps = {
   onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
   fieldName?: string
   fieldSpec?: {
@@ -37,7 +37,7 @@ export type SpecFieldProps = {
 /** Display any field from the Maplibre GL style spec and
  * choose the correct field component based on the @{fieldSpec}
  * to display @{value}. */
-export default class SpecField extends React.Component<SpecFieldProps> {
+export default class InputSpec extends React.Component<InputSpecProps> {
 
   childNodes() {
     const commonProps = {
@@ -96,21 +96,21 @@ export default class SpecField extends React.Component<SpecFieldProps> {
     case 'array':
       if(this.props.fieldName === 'text-font') {
         return <InputFont
-          {...commonProps as FieldFontProps}
+          {...commonProps as InputFontProps}
           fonts={this.props.fieldSpec.values}
         />
       } else {
         if (this.props.fieldSpec.length) {
           return <InputArray
-            {...commonProps as FieldArrayProps}
+            {...commonProps as InputArrayProps}
             type={this.props.fieldSpec.value}
             length={this.props.fieldSpec.length}
           />
         } else {
           return <InputDynamicArray
-            {...commonProps as FieldDynamicArrayProps}
+            {...commonProps as InputDynamicArrayProps}
             fieldSpec={this.props.fieldSpec}
-            type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
+            type={this.props.fieldSpec.value as InputDynamicArrayProps['type']}
           />
         }
       }

src/components/InputUrl.tsx

@@ -68,18 +68,18 @@ export type FieldUrlProps = {
   className?: string
 };
 
-type FieldUrlInternalProps = FieldUrlProps & WithTranslation;
+type InputUrlInternalProps = FieldUrlProps & WithTranslation;
 
-type FieldUrlState = {
+type InputUrlState = {
   error?: React.ReactNode
 }
 
-class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlState> {
+class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor (props: FieldUrlInternalProps) {
+  constructor (props: InputUrlInternalProps) {
     super(props);
     this.state = {
       error: validate(props.value, props.t),
@@ -115,5 +115,5 @@ class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlSt
   }
 }
 
-const FieldUrl = withTranslation()(FieldUrlInternal);
-export default FieldUrl;
+const InputUrl = withTranslation()(InputUrlInternal);
+export default InputUrl;

src/components/LayerList.tsx

@@ -16,7 +16,7 @@ import {
 
 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
-import ModalAdd from './ModalAdd'
+import ModalAdd from './modals/ModalAdd'
 
 import type {LayerSpecification, SourceSpecification} from 'maplibre-gl';
 import generateUniqueId from '../libs/document-uid';

src/components/_SpecProperty.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
-import SpecField, {SpecFieldProps} from './SpecField'
+import FieldSpec, {FieldSpecProps} from './FieldSpec'
 import FunctionButtons from './_FunctionButtons'
 
 import labelFromFieldName from '../libs/label-from-field-name'
 
 
-type SpecPropertyProps = SpecFieldProps & {
+type SpecPropertyProps = FieldSpecProps & {
   onZoomClick(...args: unknown[]): unknown
   onDataClick(...args: unknown[]): unknown
   fieldName?: string
@@ -35,7 +35,7 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
 
     const error = errors![fieldType+"."+fieldName as any] as any;
 
-    return <SpecField
+    return <FieldSpec
       {...this.props}
       error={error}
       fieldSpec={this.props.fieldSpec}

src/components/modals/Modal.tsx

@@ -10,7 +10,6 @@ type ModalInternalProps = PropsWithChildren & {
   title: string
   onOpenToggle(value: boolean): unknown
   underlayClickExits?: boolean
-  underlayProps?: any
   className?: string
 } & WithTranslation;
 
@@ -37,18 +36,17 @@ class ModalInternal extends React.Component<ModalInternalProps> {
       return <AriaModal
         titleText={this.props.title}
         underlayClickExits={this.props.underlayClickExits}
-        // @ts-ignore
-        underlayProps={this.props.underlayProps}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}
         onExit={this.onClose}
+        dialogClass='maputnik-modal-container'
       >
         <div className={classnames("maputnik-modal", this.props.className)}
           data-wd-key={this.props["data-wd-key"]}
         >
           <header className="maputnik-modal-header">
             <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
-            <span className="maputnik-modal-header-space"></span>
+            <span className="maputnik-space"></span>
             <button className="maputnik-modal-header-toggle"
               title={t("Close modal")}
               onClick={this.onClose}

src/components/modals/ModalAdd.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-
-import InputButton from './InputButton'
-import Modal from './Modal'
-import FieldType from './FieldType'
-import FieldId from './FieldId'
-import FieldSource from './FieldSource'
-import FieldSourceLayer from './FieldSourceLayer'
-import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
 import { WithTranslation, withTranslation } from 'react-i18next';
-import { NON_SOURCE_LAYERS } from '../libs/non-source-layers'
+import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
+
+import InputButton from '../InputButton'
+import Modal from './Modal'
+import FieldType from '../FieldType'
+import FieldId from '../FieldId'
+import FieldSource from '../FieldSource'
+import FieldSourceLayer from '../FieldSourceLayer'
+import { NON_SOURCE_LAYERS } from '../../libs/non-source-layers'
 
 type ModalAddInternalProps = {
   layers: LayerSpecification[]

src/components/modals/ModalDebug.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-
 import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+
 import Modal from './Modal'
 
 
@@ -62,7 +62,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
         }
       </section>
       <section className="maputnik-modal-section">
-        <h1>Links</h1>
+        <h1>{t("Links")}</h1>
         <p>
           <Trans t={t}>
             <a
@@ -71,7 +71,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
               href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
             >
               Open in OSM
-            </a> &mdash; Opens the current view on openstreetmap.org
+            </a>. Opens the current view on openstreetmap.org
           </Trans>
         </p>
       </section>

src/components/modals/ModalExport.tsx

@@ -6,12 +6,12 @@ import {format} from '@maplibre/maplibre-gl-style-spec'
 import {MdMap, MdSave} from 'react-icons/md'
 import {WithTranslation, withTranslation} from 'react-i18next';
 
-import FieldString from './FieldString'
-import InputButton from './InputButton'
+import FieldString from '../FieldString'
+import InputButton from '../InputButton'
 import Modal from './Modal'
-import style from '../libs/style'
-import fieldSpecAdditional from '../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions'
+import style from '../../libs/style'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
+import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions'
 
 
 const MAPLIBRE_GL_VERSION = version;

src/components/modals/ModalLoading.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-
-import InputButton from './InputButton'
-import Modal from './Modal'
 import { WithTranslation, withTranslation } from 'react-i18next';
 
+import InputButton from '../InputButton'
+import Modal from './Modal'
+
 
 type ModalLoadingInternalProps = {
   isOpen: boolean
@@ -14,21 +14,12 @@ type ModalLoadingInternalProps = {
 
 
 class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
-  underlayOnClick(e: Event) {
-    // This stops click events falling through to underlying modals.
-    e.stopPropagation();
-  }
-
   render() {
     const t = this.props.t;
     return <Modal
       data-wd-key="modal:loading"
       isOpen={this.props.isOpen}
       underlayClickExits={false}
-      underlayProps={{
-        // @ts-ignore
-        onClick: (e: Event) => underlayProps(e)
-      }}
       title={this.props.title}
       onOpenToggle={() => this.props.onCancel()}
     >

src/components/modals/ModalOpen.tsx

@@ -6,11 +6,11 @@ import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import ModalLoading from './ModalLoading'
 import Modal from './Modal'
-import InputButton from './InputButton'
-import InputUrl from './InputUrl'
+import InputButton from '../InputButton'
+import InputUrl from '../InputUrl'
 
-import style from '../libs/style'
-import publicStyles from '../config/styles.json'
+import style from '../../libs/style'
+import publicStyles from '../../config/styles.json'
 
 type PublicStyleProps = {
   url: string

src/components/modals/ModalSettings.tsx

@@ -3,16 +3,16 @@ import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
 import { WithTranslation, withTranslation } from 'react-i18next';
 
-import FieldArray from './FieldArray'
-import FieldNumber from './FieldNumber'
-import FieldString from './FieldString'
-import FieldUrl from './FieldUrl'
-import FieldSelect from './FieldSelect'
-import FieldEnum from './FieldEnum'
-import FieldColor from './FieldColor'
+import FieldArray from '../FieldArray'
+import FieldNumber from '../FieldNumber'
+import FieldString from '../FieldString'
+import FieldUrl from '../FieldUrl'
+import FieldSelect from '../FieldSelect'
+import FieldEnum from '../FieldEnum'
+import FieldColor from '../FieldColor'
 import Modal from './Modal'
-import fieldSpecAdditional from '../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions';
+import fieldSpecAdditional from '../../libs/field-spec-additional'
+import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions';
 
 type ModalSettingsInternalProps = {
   mapStyle: StyleSpecificationWithId

src/components/modals/ModalSources.tsx

@@ -5,15 +5,15 @@ import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSou
 import { WithTranslation, withTranslation } from 'react-i18next';
 
 import Modal from './Modal'
-import InputButton from './InputButton'
-import FieldString from './FieldString'
-import FieldSelect from './FieldSelect'
+import InputButton from '../InputButton'
+import FieldString from '../FieldString'
+import FieldSelect from '../FieldSelect'
 import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
 
-import style from '../libs/style'
-import { deleteSource, addSource, changeSource } from '../libs/source'
-import publicSources from '../config/tilesets.json'
-import { OnStyleChangedCallback, StyleSpecificationWithId } from '../libs/definitions';
+import style from '../../libs/style'
+import { deleteSource, addSource, changeSource } from '../../libs/source'
+import publicSources from '../../config/tilesets.json'
+import { OnStyleChangedCallback, StyleSpecificationWithId } from '../../libs/definitions';
 
 
 type PublicSourceProps = {

src/components/modals/ModalSourcesTypeEditor.tsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import {latest} from '@maplibre/maplibre-gl-style-spec'
-import Block from './Block'
-import FieldUrl from './FieldUrl'
-import FieldNumber from './FieldNumber'
-import FieldSelect from './FieldSelect'
-import FieldDynamicArray from './FieldDynamicArray'
-import FieldArray from './FieldArray'
-import FieldJson from './FieldJson'
-import FieldCheckbox from './FieldCheckbox'
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next'
 
+import Block from '../Block'
+import FieldUrl from '../FieldUrl'
+import FieldNumber from '../FieldNumber'
+import FieldSelect from '../FieldSelect'
+import FieldDynamicArray from '../FieldDynamicArray'
+import FieldArray from '../FieldArray'
+import FieldJson from '../FieldJson'
+import FieldCheckbox from '../FieldCheckbox'
+
+
 export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
 
 type TileJSONSourceEditorProps = {

src/locales/de/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "Layer-ID existiert bereits",
   "Debug": "Debug",
   "Options": "Optionen",
+  "Links": "Links",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>In OSM öffnen</0>. Öffnet die aktuelle Ansicht auf openstreetmap.org",
   "Save Style": "Stil Speichern",
   "Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.",
   "Save as": "Speichern unter",

src/locales/fr/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "L'identifiant du calque existe déjà",
   "Debug": "Déboguer",
   "Options": "Options",
+  "Links": "Liens",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>Ouvrir dans OSM</0>. Ouvre la vue actuelle sur openstreetmap.org",
   "Save Style": "Enregistrer le style",
   "Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.",
   "Save as": "Enregistrer sous",

src/locales/he/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "מזהה השכבה כבר קיים",
   "Debug": "דיבאג",
   "Options": "אפשרויות",
+  "Links": "קישורים",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0>. פתיחה של התצוגה הנוכחית ב- openstreetmap.org",
   "Save Style": "שמירת הסטייל",
   "Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.",
   "Save as": "שמירה בשם",
@@ -194,6 +196,5 @@
   "Public access token for LocationIQ services.": "Public access token for LocationIQ services.",
   "Style Renderer": "צייר הסטייל",
   "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה",
-  "Language": "שפה",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org"
+  "Language": "שפה"
 }

src/locales/it/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "L'ID del layer esiste già",
   "Debug": "Debug",
   "Options": "Opzioni",
+  "Links": "Collegamenti",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>Apri in OSM</0>. Apre la vista corrente su openstreetmap.org",
   "Save Style": "Opzioni stile",
   "Save the JSON style to your computer.": "Salva lo style JSON nel tuo computer.",
   "Save as": "Salva con nome",

src/locales/ja/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "レイヤーIDは既に存在します",
   "Debug": "デバッグ",
   "Options": "設定",
+  "Links": "リンク",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
   "Save Style": "スタイルを保存",
   "Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。",
   "Save as": "名前を付けて保存",
@@ -195,6 +197,5 @@
   "Style Renderer": "スタイルレンダラ",
   "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください",
   "Language": "言語",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
   "Layer options": "レイヤー設定"
 }

src/locales/zh/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "图层ID已存在",
   "Debug": "调试",
   "Options": "选项",
+  "Links": "链接",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
   "Save Style": "保存样式",
   "Save the JSON style to your computer.": "将JSON样式保存到您的计算机。",
   "Save as": "另存为",
@@ -195,6 +197,5 @@
   "Style Renderer": "样式渲染器",
   "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。",
   "Language": "语言",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
   "Layer options": "图层选项"
 }

src/styles/_modal.scss

@@ -2,6 +2,15 @@
 @use "vars";
 
 //MODAL
+
+.maputnik-modal-container {
+  text-align: left !important;
+}
+
+[dir="rtl"] .maputnik-modal-container {
+  text-align: right !important;
+}
+
 .maputnik-modal {
   min-width: 350px;
   max-width: 600px;
@@ -74,10 +83,6 @@
   @include mixins.flex-column;
 }
 
-.maputnik-modal-header-space {
-  @extend .maputnik-space !optional; /* stylelint-disable-line */
-}
-
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button !optional; /* stylelint-disable-line */