@vertigis/react-ui 11.35.1 → 12.0.1

package/SymbolInput/TextSymbolInput.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontInput } from "./FontInput.js";
+import UnsupportedSymbol, {} from "./UnsupportedSymbol.js";
+import { toRgbaString, toColor, DEFAULT_LANGUAGE } from "./utilities.js";
+import Box from "../Box/index.js";
+import FormLabelColorField, {} from "../FormLabelColorField/index.js";
+import FormLabelSliderField, {} from "../FormLabelSliderField/index.js";
+import FormLabelTextField, {} from "../FormLabelTextField/index.js";
+export function symbolIsSupported(symbol) {
+    const type = symbol.type;
+    return type === "esriTS";
+}
+const TextSymbolInput = props => {
+    const { onChange, displayOptions: initialDisplayOptions, children, symbol, isSupported = symbolIsSupported, colorResources, languageResources, TextInputComponent, NumberInputComponent, ColorInputComponent, AutoCompleteComponent, fontFamilies, ...others } = props;
+    const isSupportedSymbol = isSupported(symbol);
+    const text = {
+        ...DEFAULT_LANGUAGE,
+        ...languageResources,
+    };
+    const FormTextInput = TextInputComponent ?? FormLabelTextField;
+    const FormNumberInput = NumberInputComponent ?? FormLabelSliderField;
+    const FormColorInput = ColorInputComponent ?? FormLabelColorField;
+    const displayOptions = {
+        showColor: true,
+        showFont: true,
+        showHalo: true,
+        ...initialDisplayOptions,
+    };
+    const clampValue = (key, minValue = 0, maxValue = 100) => {
+        const clampedValue = Math.min(maxValue, Math.max(minValue, symbol[key] ?? minValue));
+        if (symbol[key] !== clampedValue) {
+            onChange({ ...symbol, [key]: clampedValue });
+        }
+    };
+    const updateValue = (key, value) => {
+        onChange({ ...symbol, [key]: value });
+    };
+    return (_jsxs(Box, { ...others, children: [!isSupportedSymbol && (_jsx(UnsupportedSymbol, { languageResources: languageResources, colorResources: colorResources })), children, isSupportedSymbol && (_jsxs(_Fragment, { children: [displayOptions.showFont && (_jsx(FontInput, { font: symbol.font, onChange: value => updateValue("font", value), languageResources: text, fontFamilies: fontFamilies, AutoCompleteComponent: AutoCompleteComponent })), displayOptions.showAlignments && (_jsxs(_Fragment, { children: [(displayOptions.showAlignments === true ||
+                                displayOptions.showAlignments.showHorizontal) && (_jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.horizontalAlignment, value: symbol.horizontalAlignment, onChange: event => {
+                                    const { value } = event.target;
+                                    updateValue("horizontalAlignment", value);
+                                }, children: getHorizontalAlignmentValues(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) })), (displayOptions.showAlignments === true ||
+                                displayOptions.showAlignments.showVertical) && (_jsx(FormTextInput, { fullWidth: true, nativeSelect: true, label: text.verticalAlignment, value: symbol.verticalAlignment, onChange: event => {
+                                    const { value } = event.target;
+                                    updateValue("verticalAlignment", value);
+                                }, children: getVerticalAlignmentValues(text).map(ls => (_jsx("option", { value: ls.id, children: ls.label }, ls.id))) }))] })), displayOptions.showColor && (_jsx(FormColorInput, { fullWidth: true, label: text.color, onChange: (value) => {
+                            updateValue("color", toColor(value));
+                        }, value: toRgbaString(symbol.color) })), displayOptions.showHalo && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, label: text.haloColor, onChange: (value) => {
+                                    updateValue("haloColor", toColor(value));
+                                }, value: toRgbaString(symbol.haloColor) }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                                    step: 0.5,
+                                    min: 0,
+                                    max: 10,
+                                }, InputProps: {
+                                    onBlur: (event) => {
+                                        clampValue("haloSize", 0, 10);
+                                    },
+                                    min: 0,
+                                    max: 100,
+                                }, label: text.haloSize, value: symbol.haloSize, onChange: value => {
+                                    updateValue("haloSize", value);
+                                } })] })), displayOptions.showColor && (_jsx(FormColorInput, { fullWidth: true, label: text.backgroundColor, onChange: (value) => {
+                            updateValue("backgroundColor", toColor(value));
+                        }, value: toRgbaString(symbol.backgroundColor) })), displayOptions.showBorder && (_jsxs(_Fragment, { children: [_jsx(FormColorInput, { fullWidth: true, label: text.borderLineColor, onChange: (value) => {
+                                    updateValue("borderLineColor", toColor(value));
+                                }, value: toRgbaString(symbol.borderLineColor) }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                                    step: 0.5,
+                                    min: 0,
+                                    max: 100,
+                                }, InputProps: {
+                                    onBlur: (event) => {
+                                        clampValue("borderLineSize", 0, 100);
+                                    },
+                                    min: 0,
+                                    max: 100,
+                                }, label: text.borderLineSize, value: symbol.borderLineSize, onChange: value => {
+                                    updateValue("borderLineSize", value);
+                                } })] })), displayOptions.showAngle && (_jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                            step: 0.5,
+                            min: 0,
+                            max: 360,
+                        }, InputProps: {
+                            onBlur: (event) => {
+                                clampValue("angle", 0, 360);
+                            },
+                            min: 0,
+                            max: 360,
+                        }, label: text.angleTitle, value: symbol.angle, onChange: value => {
+                            updateValue("angle", value);
+                        } })), displayOptions.showOffset && (_jsxs(_Fragment, { children: [_jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                                    step: 0.5,
+                                    min: 0,
+                                    max: 100,
+                                }, InputProps: {
+                                    onBlur: (event) => {
+                                        clampValue("xoffset", 0, 100);
+                                    },
+                                    min: 0,
+                                    max: 100,
+                                }, label: text.xOffsetTitle, value: symbol.xoffset, onChange: value => {
+                                    updateValue("xoffset", value);
+                                } }), _jsx(FormNumberInput, { fullWidth: true, SliderProps: {
+                                    step: 0.5,
+                                    min: 0,
+                                    max: 100,
+                                }, InputProps: {
+                                    onBlur: (event) => {
+                                        clampValue("yoffset", 0, 100);
+                                    },
+                                    min: 0,
+                                    max: 100,
+                                }, label: text.yOffsetTitle, value: symbol.yoffset, onChange: value => {
+                                    updateValue("yoffset", value);
+                                } })] }))] }))] }));
+};
+export default TextSymbolInput;
+const getHorizontalAlignmentValues = (t) => {
+    return [
+        { id: "left", label: t.horizontalAlignmentLeft },
+        { id: "right", label: t.horizontalAlignmentRight },
+        { id: "center", label: t.horizontalAlignmentCenter },
+    ];
+};
+const getVerticalAlignmentValues = (t) => {
+    return [
+        { id: "baseline", label: t.verticalAlignmentBaseline },
+        { id: "top", label: t.verticalAlignmentTop },
+        { id: "middle", label: t.verticalAlignmentMiddle },
+        { id: "bottom", label: t.verticalAlignmentBottom },
+    ];
+};

package/SymbolInput/UnsupportedSymbol.d.ts

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+export interface LanguageResources {
+    symbolUnsupportedErrorMessage?: string;
+}
+export interface ColorResources {
+    /**
+     * Color value for error text, in any valid CSS format.
+     */
+    errorForeground?: string;
+    /**
+     * Color value for error text background, in any valid CSS format.
+     */
+    errorBackground?: string;
+}
+export declare const DEFAULT_COLORS: ColorResources;
+export interface UnsupportedSymbolProps {
+    languageResources?: LanguageResources;
+    colorResources?: ColorResources;
+}
+declare const UnsupportedSymbol: FC<UnsupportedSymbolProps>;
+export default UnsupportedSymbol;

package/SymbolInput/UnsupportedSymbol.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_LANGUAGE } from "./utilities.js";
+import Typography from "../Typography/index.js";
+export const DEFAULT_COLORS = {
+    errorBackground: "#B22222",
+    errorForeground: "#FFFFFF",
+};
+const UnsupportedSymbol = ({ colorResources, languageResources }) => {
+    const text = {
+        ...DEFAULT_LANGUAGE,
+        ...languageResources,
+    };
+    const colors = { ...DEFAULT_COLORS, ...colorResources };
+    return (_jsx(Typography, { sx: {
+            mb: 1,
+            p: 0.5,
+            backgroundColor: colors.errorBackground,
+            color: colors.errorForeground,
+            borderRadius: 1,
+        }, children: text.symbolUnsupportedErrorMessage }));
+};
+export default UnsupportedSymbol;

package/SymbolInput/fonts.d.ts

@@ -0,0 +1,9 @@
+export interface FontFamily {
+    name: string;
+    font: {
+        family?: string;
+        style?: "italic" | "normal" | "oblique";
+        weight?: "bold" | "bolder" | "lighter" | "normal";
+    };
+}
+export declare const fonts: FontFamily[];

package/SymbolInput/fonts.js

@@ -0,0 +1,352 @@
+// Standard Esri supported Fonts pulled from the Esri font sandbox.
+export const fonts = [
+    {
+        name: "Abril Fatface Regular",
+        font: { family: "Abril Fatface", style: "normal", weight: "normal" },
+    },
+    { name: "Alegreya Bold", font: { family: "Alegreya", style: "normal", weight: "bold" } },
+    { name: "Alegreya Bold Italic", font: { family: "Alegreya", style: "italic", weight: "bold" } },
+    { name: "Alegreya Italic", font: { family: "Alegreya", style: "italic", weight: "normal" } },
+    { name: "Alegreya Regular", font: { family: "Alegreya", style: "normal", weight: "normal" } },
+    { name: "Alegreya SC Bold", font: { family: "Alegreya SC", style: "normal", weight: "bold" } },
+    {
+        name: "Alegreya SC Italic",
+        font: { family: "Alegreya SC", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Alegreya SC Regular",
+        font: { family: "Alegreya SC", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Alegreya Sans Italic",
+        font: { family: "Alegreya Sans", style: "italic", weight: "normal" },
+    },
+    { name: "Amarante Regular", font: { family: "Amarante", style: "normal", weight: "normal" } },
+    { name: "Amatic SC Bold", font: { family: "Amatic SC", style: "normal", weight: "bold" } },
+    { name: "Arial Bold", font: { family: "Arial", style: "normal", weight: "bold" } },
+    { name: "Arial Bold Italic", font: { family: "Arial", style: "italic", weight: "bold" } },
+    { name: "Arial Italic", font: { family: "Arial", style: "italic", weight: "normal" } },
+    { name: "Arial Regular", font: { family: "Arial", style: "normal", weight: "normal" } },
+    {
+        name: "Arial Unicode MS Bold",
+        font: { family: "Arial Unicode MS", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Arial Unicode MS Regular",
+        font: { family: "Arial Unicode MS", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Atomic Age Regular",
+        font: { family: "Atomic Age", style: "normal", weight: "normal" },
+    },
+    { name: "Audiowide Regular", font: { family: "Audiowide", style: "normal", weight: "normal" } },
+    {
+        name: "Avenir Next LT Pro Bold",
+        font: { family: "Avenir Next LT Pro", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Avenir Next LT Pro Bold Italic",
+        font: { family: "Avenir Next LT Pro", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Avenir Next LT Pro Demi Italic",
+        font: { family: "Avenir Next LT Pro Demi", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Avenir Next LT Pro Italic",
+        font: { family: "Avenir Next LT Pro", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Avenir Next LT Pro Light",
+        font: { family: "Avenir Next LT Pro Light", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Avenir Next LT Pro Light Italic",
+        font: { family: "Avenir Next LT Pro Light", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Avenir Next LT Pro Medium Bold",
+        font: { family: "Avenir Next LT Pro Medium", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Avenir Next LT Pro Medium Bold Italic",
+        font: { family: "Avenir Next LT Pro Medium", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Avenir Next LT Pro Regular",
+        font: { family: "Avenir Next LT Pro", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Avenir Next LT Pro Regular Bold",
+        font: { family: "Avenir Next LT Pro Regular", style: "normal", weight: "bold" },
+    },
+    {
+        name: "BellTopo Sans Bold",
+        font: { family: "BellTopo Sans", style: "normal", weight: "bold" },
+    },
+    {
+        name: "BellTopo Sans Bold Italic",
+        font: { family: "BellTopo Sans", style: "italic", weight: "bold" },
+    },
+    {
+        name: "BellTopo Sans Italic",
+        font: { family: "BellTopo Sans", style: "italic", weight: "normal" },
+    },
+    {
+        name: "BellTopo Sans Regular",
+        font: { family: "BellTopo Sans", style: "normal", weight: "normal" },
+    },
+    { name: "Belleza Regular", font: { family: "Belleza", style: "normal", weight: "normal" } },
+    {
+        name: "Black Ops One Regular",
+        font: { family: "Black Ops One", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Cabin Sketch Bold",
+        font: { family: "Cabin Sketch", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Cabin Sketch Regular",
+        font: { family: "Cabin Sketch", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Coming Soon Regular",
+        font: { family: "Coming Soon", style: "normal", weight: "normal" },
+    },
+    {
+        name: "FGDC GeoAge Regular",
+        font: { family: "FGDC GeoAge", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Homemade Apple Regular",
+        font: { family: "Homemade Apple", style: "normal", weight: "normal" },
+    },
+    {
+        name: "IM FELL DW Pica PRO Italic",
+        font: { family: "IM FELL DW Pica PRO", style: "italic", weight: "normal" },
+    },
+    {
+        name: "IM FELL DW Pica PRO Regular",
+        font: { family: "IM FELL DW Pica PRO", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Josefin Sans Regular",
+        font: { family: "Josefin Sans", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Josefin Sans Semibold Italic",
+        font: { family: "Josefin Sans Semibold", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Josefin Slab Bold",
+        font: { family: "Josefin Slab", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Josefin Slab Bold Italic",
+        font: { family: "Josefin Slab", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Josefin Slab Italic",
+        font: { family: "Josefin Slab", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Josefin Slab Light Italic",
+        font: { family: "Josefin Slab Light", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Josefin Slab Regular",
+        font: { family: "Josefin Slab", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Josefin Slab Thin Italic",
+        font: { family: "Josefin Slab Thin", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Just Another Hand Regular",
+        font: { family: "Just Another Hand", style: "normal", weight: "normal" },
+    },
+    { name: "Kranky Regular", font: { family: "Kranky", style: "normal", weight: "normal" } },
+    { name: "Life Savers Bold", font: { family: "Life Savers", style: "normal", weight: "bold" } },
+    {
+        name: "Loved by the King Regular",
+        font: { family: "Loved by the King", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Merriweather Bold",
+        font: { family: "Merriweather", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Merriweather Bold Italic",
+        font: { family: "Merriweather", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Merriweather Italic",
+        font: { family: "Merriweather", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Merriweather Regular",
+        font: { family: "Merriweather", style: "normal", weight: "normal" },
+    },
+    { name: "Montserrat Bold", font: { family: "Montserrat", style: "normal", weight: "bold" } },
+    {
+        name: "Montserrat Italic",
+        font: { family: "Montserrat", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Montserrat Medium Italic",
+        font: { family: "Montserrat Medium", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Montserrat Regular",
+        font: { family: "Montserrat", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Montserrat Semibold Italic",
+        font: { family: "Montserrat Semibold", style: "italic", weight: "bold" },
+    },
+    { name: "Noto Sans Bold", font: { family: "Noto Sans", style: "normal", weight: "bold" } },
+    {
+        name: "Noto Sans Bold Italic",
+        font: { family: "Noto Sans", style: "italic", weight: "bold" },
+    },
+    { name: "Noto Sans Italic", font: { family: "Noto Sans", style: "italic", weight: "normal" } },
+    { name: "Noto Sans Regular", font: { family: "Noto Sans", style: "normal", weight: "normal" } },
+    { name: "Noto Serif Bold", font: { family: "Noto Serif", style: "normal", weight: "bold" } },
+    {
+        name: "Noto Serif Bold Italic",
+        font: { family: "Noto Serif", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Noto Serif Italic",
+        font: { family: "Noto Serif", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Noto Serif Regular",
+        font: { family: "Noto Serif", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Old Standard TT Bold",
+        font: { family: "Old Standard TT", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Old Standard TT Italic",
+        font: { family: "Old Standard TT", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Old Standard TT Regular",
+        font: { family: "Old Standard TT", style: "normal", weight: "normal" },
+    },
+    { name: "Orbitron Bold", font: { family: "Orbitron", style: "normal", weight: "bold" } },
+    { name: "Orbitron Regular", font: { family: "Orbitron", style: "normal", weight: "normal" } },
+    { name: "Oregano Italic", font: { family: "Oregano", style: "italic", weight: "normal" } },
+    { name: "Oregano Regular", font: { family: "Oregano", style: "normal", weight: "normal" } },
+    { name: "Oswald Bold", font: { family: "Oswald", style: "normal", weight: "bold" } },
+    { name: "Oswald Regular", font: { family: "Oswald", style: "normal", weight: "normal" } },
+    { name: "Pacifico Regular", font: { family: "Pacifico", style: "normal", weight: "normal" } },
+    {
+        name: "Palatino Linotype Regular",
+        font: { family: "Palatino Linotype", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Playfair Display Black",
+        font: { family: "Playfair Display Black", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Playfair Display Bold",
+        font: { family: "Playfair Display", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Playfair Display Bold Italic",
+        font: { family: "Playfair Display", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Playfair Display Italic",
+        font: { family: "Playfair Display", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Playfair Display Regular",
+        font: { family: "Playfair Display", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Playfair Display SC Bold",
+        font: { family: "Playfair Display SC", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Playfair Display SC Regular",
+        font: { family: "Playfair Display SC", style: "normal", weight: "normal" },
+    },
+    { name: "Redressed Regular", font: { family: "Redressed", style: "normal", weight: "normal" } },
+    { name: "Risque Regular", font: { family: "Risque", style: "normal", weight: "normal" } },
+    {
+        name: "Roboto Condensed Italic",
+        font: { family: "Roboto Condensed", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Roboto Condensed Light Italic",
+        font: { family: "Roboto Condensed Light", style: "italic", weight: "normal" },
+    },
+    { name: "Rye Regular", font: { family: "Rye", style: "normal", weight: "normal" } },
+    {
+        name: "Special Elite Regular",
+        font: { family: "Special Elite", style: "normal", weight: "normal" },
+    },
+    { name: "Sans Serif", font: { family: "sans-serif", style: "normal", weight: "normal" } },
+    { name: "Sans Serif Bold", font: { family: "sans-serif", style: "normal", weight: "bold" } },
+    {
+        name: "Sans Serif Italic",
+        font: { family: "sans-serif", style: "italic", weight: "normal" },
+    },
+    { name: "Syncopate Bold", font: { family: "Syncopate", style: "normal", weight: "bold" } },
+    { name: "Syncopate Regular", font: { family: "Syncopate", style: "normal", weight: "normal" } },
+    { name: "Tangerine Regular", font: { family: "Tangerine", style: "normal", weight: "normal" } },
+    { name: "Ubuntu Bold", font: { family: "Ubuntu", style: "normal", weight: "bold" } },
+    { name: "Ubuntu Bold Italic", font: { family: "Ubuntu", style: "italic", weight: "bold" } },
+    {
+        name: "Ubuntu Condensed Regular",
+        font: { family: "Ubuntu Condensed", style: "normal", weight: "normal" },
+    },
+    { name: "Ubuntu Italic", font: { family: "Ubuntu", style: "italic", weight: "normal" } },
+    { name: "Ubuntu Light", font: { family: "Ubuntu Light", style: "normal", weight: "normal" } },
+    {
+        name: "Ubuntu Light Bold",
+        font: { family: "Ubuntu Light", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Ubuntu Light Bold Italic",
+        font: { family: "Ubuntu Light", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Ubuntu Light Italic",
+        font: { family: "Ubuntu Light", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Ubuntu Medium Italic",
+        font: { family: "Ubuntu Medium", style: "italic", weight: "normal" },
+    },
+    { name: "Ubuntu Mono Bold", font: { family: "Ubuntu Mono", style: "normal", weight: "bold" } },
+    {
+        name: "Ubuntu Mono Bold Italic",
+        font: { family: "Ubuntu Mono", style: "italic", weight: "bold" },
+    },
+    {
+        name: "Ubuntu Mono Italic",
+        font: { family: "Ubuntu Mono", style: "italic", weight: "normal" },
+    },
+    {
+        name: "Ubuntu Mono Regular",
+        font: { family: "Ubuntu Mono", style: "normal", weight: "normal" },
+    },
+    { name: "Ubuntu Regular", font: { family: "Ubuntu", style: "normal", weight: "normal" } },
+    {
+        name: "UnifrakturCook Bold",
+        font: { family: "UnifrakturCook", style: "normal", weight: "bold" },
+    },
+    {
+        name: "Vast Shadow Regular",
+        font: { family: "Vast Shadow", style: "normal", weight: "normal" },
+    },
+    {
+        name: "Walter Turncoat Regular",
+        font: { family: "Walter Turncoat", style: "normal", weight: "normal" },
+    },
+];

package/SymbolInput/utilities.d.ts

@@ -0,0 +1,83 @@
+import type { ColorJson, SimpleFillSymbolJson, SimpleLineSymbolJson, SimpleMarkerSymbolJson, SymbolJson } from "./SymbolJson";
+export declare const DEFAULT_LANGUAGE: {
+    fillColorTitle: string;
+    fillStyleTitle: string;
+    lineColorTitle: string;
+    lineStyleTitle: string;
+    lineWidthTitle: string;
+    markerAngleTitle: string;
+    xOffsetTitle: string;
+    yOffsetTitle: string;
+    markerSizeTitle: string;
+    markerStyleTitle: string;
+    symbolUnsupportedErrorMessage: string;
+    markerStyleCircle: string;
+    markerStyleCross: string;
+    markerStyleDiamond: string;
+    markerStyleSquare: string;
+    markerStyleTriangle: string;
+    markerStyleX: string;
+    lineStyleDash: string;
+    lineStyleDashDot: string;
+    lineStyleDot: string;
+    lineStyleLongDashDot: string;
+    lineStyleLongDash: string;
+    lineStyleNone: string;
+    lineStyleShortDashDotDot: string;
+    lineStyleShortDashDot: string;
+    lineStyleShortDash: string;
+    lineStyleShortDot: string;
+    lineStyleSolid: string;
+    fillStyleBackwardDiagonal: string;
+    fillStyleCross: string;
+    fillStyleDiagonalCross: string;
+    fillStyleForwardDiagonal: string;
+    fillStyleHorizontal: string;
+    fillStyleNone: string;
+    fillStyleSolid: string;
+    fillStyleVertical: string;
+    angleTitle: string;
+    backgroundColor: string;
+    borderLineColor: string;
+    borderLineSize: string;
+    color: string;
+    font: string;
+    fontSize: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    haloColor: string;
+    haloSize: string;
+    horizontalAlignment: string;
+    horizontalAlignmentLeft: string;
+    horizontalAlignmentRight: string;
+    horizontalAlignmentCenter: string;
+    verticalAlignment: string;
+    verticalAlignmentBaseline: string;
+    verticalAlignmentTop: string;
+    verticalAlignmentMiddle: string;
+    verticalAlignmentBottom: string;
+    decoration: string;
+    decorationNone: string;
+    decorationLineThrough: string;
+    decorationLineUnderline: string;
+};
+export declare const NO_FILL_MARKER_STYLES: SimpleMarkerSymbolJson["style"][];
+export declare const DEFAULT_PARSE_NUMBER: (s: string | undefined) => number;
+export declare const DEFAULT_FORMAT_NUMBER: (n: number | undefined) => string;
+export type SelectValues<T extends string = string, U extends string = string> = {
+    id: T;
+    label: U;
+}[];
+export declare const getLineStyle: (symbol: SymbolJson) => SimpleLineSymbolJson["style"] | undefined;
+export declare const getFillStyle: (symbol: SymbolJson) => SimpleFillSymbolJson["style"] | undefined;
+export declare const getLineColor: (symbol: SymbolJson) => ColorJson | undefined;
+export declare const getFillColor: (symbol: SymbolJson) => ColorJson | undefined;
+export declare const getLineWidth: (symbol: SymbolJson) => number | undefined;
+export declare const getMarkerProperty: <T extends keyof SimpleMarkerSymbolJson, U extends SimpleMarkerSymbolJson[T]>(symbol: SymbolJson, property: T) => U | undefined;
+export declare const toRgbaString: (color: ColorJson | undefined) => string;
+export declare const toColor: (color: string | undefined) => ColorJson;
+export declare const fromRgbString: (color: string) => ColorJson | undefined;
+export declare const fromRgbaString: (color: string) => ColorJson | undefined;
+export declare const DEFAULT_COLOR: number[];
+export declare const DEFAULT_RGBA_STRING = "rgba(255, 255, 255, 1)";