@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/theme-creator/components/color-palette-editor/color-palette-editor.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var formatString = require('../../../../utilities/formatString.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var colorPaletteEditor_styles = require('./color-palette-editor.styles.cjs');
+
+const ColorPaletteEditor = ({
+  paletteConfig,
+  onUpdatePaletteConfig,
+  formatKey
+}) => {
+  const [expandedCategories, setExpandedCategories] = React.useState(new Set());
+  const toggleExpandedCategories = category => {
+    setExpandedCategories(prev => {
+      const openCategories = new Set(prev);
+      if (openCategories.has(category)) {
+        return new Set([...openCategories].filter(item => item !== category));
+      } else {
+        return new Set([...openCategories, category]);
+      }
+    });
+  };
+  const validateHex = value => {
+    if (!value) return undefined;
+    // If it's a valid hex, return the value
+    if (value.match(/^#[0-9A-Fa-f]{0,6}$/)) {
+      return value;
+    }
+    // If it's a 6 digit hex, add the # and return
+    if (value.match(/^[0-9A-Fa-f]{6}$/)) {
+      return `#${value}`;
+    }
+    return undefined;
+  };
+  const handleInputChange = React.useCallback((category, key, value) => {
+    const hexValue = validateHex(value);
+    const updatedConfig = Object.assign(Object.assign({}, paletteConfig || {}), {
+      [category]: Object.assign(Object.assign({}, (paletteConfig === null || paletteConfig === void 0 ? void 0 : paletteConfig[category]) || {}), {
+        [key]: hexValue
+      })
+    });
+    onUpdatePaletteConfig(updatedConfig);
+  }, [onUpdatePaletteConfig, paletteConfig]);
+  return jsxRuntime.jsx("div", Object.assign({
+    "data-test-id": "color-palette-editor"
+  }, {
+    children: paletteConfig && Object.keys(paletteConfig).sort().map(category => jsxRuntime.jsxs("div", Object.assign({
+      css: colorPaletteEditor_styles.styles.container,
+      id: category
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        "aria-expanded": expandedCategories.has(category),
+        css: colorPaletteEditor_styles.styles.category,
+        onClick: event => {
+          event.preventDefault();
+          toggleExpandedCategories(category);
+        },
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            toggleExpandedCategories(category);
+          }
+        },
+        role: "button",
+        tabIndex: 0
+      }, {
+        children: [jsxRuntime.jsx("p", {
+          children: formatString.capitalizeFirstLetter(category)
+        }), jsxRuntime.jsx(giger.Icon, {
+          name: expandedCategories.has(category) ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+          size: giger.IconSize.SIZE_REGULAR
+        })]
+      })), expandedCategories.has(category) && Object.keys(paletteConfig[category]).map(key => jsxRuntime.jsxs("div", Object.assign({
+        css: colorPaletteEditor_styles.styles.inputContainer,
+        id: "input-container"
+      }, {
+        children: [jsxRuntime.jsx("label", Object.assign({
+          css: {
+            fontWeight: "bold"
+          },
+          htmlFor: `${category}.${key}`
+        }, {
+          children: formatKey(key)
+        })), jsxRuntime.jsxs("form", Object.assign({
+          css: colorPaletteEditor_styles.styles.wrapper
+        }, {
+          children: [jsxRuntime.jsx("input", {
+            css: colorPaletteEditor_styles.styles.input,
+            onChange: e => {
+              e.preventDefault();
+              handleInputChange(category, key, e.target.value);
+            },
+            onKeyDown: e => {
+              if (e.key === "Enter") e.preventDefault();
+            },
+            type: "text",
+            value: paletteConfig[category][key]
+          }), jsxRuntime.jsx("input", {
+            css: colorPaletteEditor_styles.styles.colorPicker,
+            onChange: e => handleInputChange(category, key, e.target.value),
+            type: "color",
+            value: paletteConfig[category][key]
+          })]
+        }))]
+      }), key))]
+    }), category))
+  }));
+};
+
+exports.ColorPaletteEditor = ColorPaletteEditor;

package/cjs/elements/theme-creator/components/color-palette-editor/color-palette-editor.styles.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  category: {
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  colorPicker: theme => ({
+    "&::-webkit-color-swatch": {
+      border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+      borderRadius: "4px",
+      padding: 0
+    },
+    "&::-webkit-color-swatch-wrapper": {
+      padding: 0
+    },
+    alignSelf: "center",
+    appearance: "none",
+    background: "none",
+    border: 0,
+    cursor: "pointer",
+    height: styles$1.scopeTheme(theme).spacing(4.25),
+    outline: "none",
+    width: styles$1.scopeTheme(theme).spacing(4.25)
+  }),
+  container: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  input: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: "4px",
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    fontSize: "14px",
+    padding: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  inputContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px 0`
+  }),
+  wrapper: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/theme-creator/components/color-palette-editor/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var colorPaletteEditor = require('./color-palette-editor.cjs');
+
+
+
+exports.ColorPaletteEditor = colorPaletteEditor.ColorPaletteEditor;

package/cjs/elements/theme-creator/components/configure-theme/configure-theme.cjs

@@ -0,0 +1,329 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../../../hooks/use-toggle.cjs');
+var formatString = require('../../../../utilities/formatString.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var index = require('../../../../themes/index.cjs');
+var configureTheme_styles = require('./configure-theme.styles.cjs');
+var drawer = require('../../../../components/drawer/drawer.cjs');
+var copyButton = require('../../../../components/copy/copy-button.cjs');
+var typographyEditor = require('../typography-editor/typography-editor.cjs');
+var colorPaletteEditor = require('../color-palette-editor/color-palette-editor.cjs');
+var segementedControl = require('../../../../components/segmented-control/segemented-control.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+
+const ConfigureTheme = ({
+  themeConfig,
+  onUpdateThemeConfig,
+  presets,
+  showDrawer
+}) => {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const globalKeys = Object.keys(themeConfig);
+  const formattedFallbackTheme = React.useMemo(() => {
+    // TODO: Theme Creator can only handle palette and components currently
+    // Only show the palette and components until other editors are implemented
+    const {
+      palette,
+      components
+    } = index.fallback;
+    const {
+      Typography
+    } = components || {};
+    // unhandled palette keys
+    const _a = palette || {},
+      restPalette = tslib.__rest(_a, ["black", "white", "dataVisualization"]);
+    return {
+      components: {
+        Typography
+      },
+      palette: Object.assign({}, restPalette)
+    };
+  }, []);
+  // If the themeConfig has a "components" key, show only the child component keys, not "components" itself
+  const tabs = globalKeys.flatMap(key => {
+    if (key === "components" && themeConfig[key] && typeof themeConfig[key] === "object") {
+      const childComponentKeys = Object.keys(themeConfig[key]);
+      return childComponentKeys;
+    } else {
+      return [key];
+    }
+  });
+  const formattedThemeTabs = tabs.map(tab => {
+    if (tab === "palette") {
+      return {
+        label: "Color Palette",
+        value: "Color Palette"
+      };
+    }
+    return {
+      label: formatString.capitalizeFirstLetter(tab),
+      value: formatString.capitalizeFirstLetter(tab)
+    };
+  }).sort((a, b) => a.label.localeCompare(b.label));
+  const [selectedTab, setSelectedTab] = React.useState(formattedThemeTabs[0].value);
+  const handleSelectedTab = tab => {
+    setSelectedTab(tab);
+  };
+  const formatKey = key => formatString.addSpaceBetweenWords(formatString.pascalize(key));
+  const renderContentBySelectedTab = (themeConfig, selectedTab) => {
+    var _a;
+    switch (selectedTab) {
+      case "Color Palette":
+        return jsxRuntime.jsx(colorPaletteEditor.ColorPaletteEditor, {
+          formatKey: formatKey,
+          onUpdatePaletteConfig: updatedPalette => {
+            onUpdateThemeConfig(Object.assign(Object.assign({}, themeConfig), {
+              palette: updatedPalette
+            }));
+          },
+          paletteConfig: themeConfig.palette
+        });
+      case "Typography":
+        return jsxRuntime.jsx(typographyEditor.TypographyEditor, {
+          formatKey: formatKey,
+          onUpdateTypographyConfig: updatedTypography => {
+            onUpdateThemeConfig(Object.assign(Object.assign({}, themeConfig), {
+              components: Object.assign(Object.assign({}, themeConfig.components), {
+                Typography: updatedTypography
+              })
+            }));
+          },
+          typographyConfig: (_a = themeConfig.components) === null || _a === void 0 ? void 0 : _a.Typography
+        });
+      default:
+        return jsxRuntime.jsxs("div", {
+          children: ["Editor for ", selectedTab, " is not implemented yet."]
+        });
+    }
+  };
+  const presetsRef = React.useRef(null);
+  const [showPresets, toggleShowPresets] = useToggle.useToggle(false);
+  const presetsWithDefault = [{
+    presetName: "Default",
+    themeConfig: formattedFallbackTheme
+  }, {
+    presetName: "Auctane",
+    themeConfig: index.auctane
+  }, ...(presets || [])];
+  const applyNewTheme = theme => {
+    onUpdateThemeConfig(theme);
+  };
+  const [showThemeInput, toggleShowThemeInput] = useToggle.useToggle(false);
+  const [themeInputValue, setThemeInputValue] = React.useState("");
+  const [themeInputError, setThemeInputError] = React.useState();
+  const handleClearThemeInput = React.useCallback(() => {
+    toggleShowThemeInput();
+    setThemeInputValue("");
+    setThemeInputError("");
+  }, [toggleShowThemeInput]);
+  const handleSubmitTextInput = e => {
+    e.preventDefault();
+    const jsonTheme = themeInputValue
+    // Add quotes around keys
+    .replace(/([a-zA-Z0-9_]+)(?=:)/g, '"$1"')
+    // Remove trailing commas
+    .replace(/,\s*(}|\])/g, "$1")
+    // Remove ending semi-colon
+    .replace(/;$/, "");
+    try {
+      const parsedTheme = JSON.parse(jsonTheme);
+      const mergedTheme = Object.assign(Object.assign({}, themeConfig), {
+        components: Object.assign(Object.assign({}, themeConfig.components), parsedTheme.components),
+        palette: Object.assign(Object.assign({}, themeConfig.palette), parsedTheme.palette)
+      });
+      onUpdateThemeConfig(mergedTheme);
+      handleClearThemeInput();
+      toggleShowPresets();
+    } catch (error) {
+      setThemeInputError("Error parsing input.");
+      console.error("Error parsing input", error);
+    }
+  };
+  const formatPlaceholder = () => {
+    const mockTheme = {
+      palette: {
+        primary: {
+          dark: "#1E0257",
+          light: "#9D96FF",
+          main: "#11003A",
+          ultraLight: "#F1F2F3"
+        }
+      },
+      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+      components: {
+        Typography: {
+          heading3: {
+            fontSize: "24px",
+            fontWeight: 700
+          }
+        }
+      }
+    };
+    return JSON.stringify(mockTheme, null, 2).replace(/"([^"]+)":/g, "$1:");
+  };
+  return jsxRuntime.jsxs("div", Object.assign({
+    "aria-label": "Theme Creator",
+    css: configureTheme_styles.styles.container,
+    "data-testid": "theme-creator",
+    role: "region"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: configureTheme_styles.styles.content
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: configureTheme_styles.styles.header
+      }, {
+        children: [jsxRuntime.jsx("div", Object.assign({
+          css: {
+            overflow: "scroll",
+            width: "100%"
+          }
+        }, {
+          children: jsxRuntime.jsx(segementedControl.SegmentedControl, {
+            onSelect: handleSelectedTab,
+            segments: formattedThemeTabs,
+            selectedSegment: selectedTab
+          })
+        })), jsxRuntime.jsxs("div", {
+          children: [jsxRuntime.jsxs("button", Object.assign({
+            "aria-controls": "presets-popover",
+            "aria-expanded": showPresets,
+            css: configureTheme_styles.styles.presetsButton,
+            onClick: e => {
+              e.preventDefault();
+              toggleShowPresets();
+            },
+            ref: presetsRef
+          }, {
+            children: ["Presets", jsxRuntime.jsx(giger.Icon, {
+              name: gigerTheme.IconNames.CARET_BOTTOM,
+              size: giger.IconSize.SIZE_SMALL
+            })]
+          })), jsxRuntime.jsx(giger.Popover, Object.assign({
+            container: document.querySelector("#theme-creator"),
+            isOpen: showPresets,
+            onClickAway: () => toggleShowPresets(),
+            placement: "bottom-end",
+            reference: presetsRef.current
+          }, {
+            children: jsxRuntime.jsx("div", Object.assign({
+              css: configureTheme_styles.styles.popoverWrapper
+            }, {
+              children: showThemeInput ? jsxRuntime.jsxs("form", Object.assign({
+                css: configureTheme_styles.styles.inputForm,
+                onSubmit: handleSubmitTextInput
+              }, {
+                children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+                  variant: "small"
+                }, {
+                  children: "*Must be in JavaScript object format"
+                })), jsxRuntime.jsx("textarea", {
+                  css: configureTheme_styles.styles.textArea,
+                  disabled: !showThemeInput,
+                  onChange: e => setThemeInputValue(e.target.value),
+                  placeholder: formatPlaceholder(),
+                  required: true,
+                  value: themeInputValue
+                }), themeInputError ? jsxRuntime.jsx(giger.Typography, Object.assign({
+                  css: {
+                    color: "red"
+                  },
+                  variant: "small"
+                }, {
+                  children: themeInputError
+                })) : jsxRuntime.jsx(spacer.Spacer, {
+                  multiplier: 2
+                }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+                  justify: "end"
+                }, {
+                  children: [jsxRuntime.jsx(giger.Button, Object.assign({
+                    onClick: handleClearThemeInput,
+                    variant: giger.ButtonVariant.TEXT
+                  }, {
+                    children: "Cancel"
+                  })), jsxRuntime.jsx(giger.Button, Object.assign({
+                    css: configureTheme_styles.styles.getApplyButtonStyles(!themeInputValue),
+                    disabled: !themeInputValue,
+                    type: "submit"
+                  }, {
+                    children: "Apply"
+                  }))]
+                }))]
+              })) : jsxRuntime.jsxs("ul", Object.assign({
+                css: {
+                  listStyle: "none"
+                }
+              }, {
+                children: [presetsWithDefault.map((preset, idx) => jsxRuntime.jsxs("li", Object.assign({
+                  css: configureTheme_styles.styles.presetListItem
+                }, {
+                  children: [jsxRuntime.jsx(giger.Typography, {
+                    children: preset.presetName
+                  }), jsxRuntime.jsx(giger.Button, Object.assign({
+                    "aria-label": `Set ${preset.presetName} Theme`,
+                    css: configureTheme_styles.styles.getApplyButtonStyles(),
+                    onClick: e => {
+                      e.preventDefault();
+                      toggleShowPresets();
+                      applyNewTheme(preset.themeConfig);
+                      setSelectedTab("Color Palette");
+                    }
+                  }, {
+                    children: "Apply"
+                  }), preset.presetName)]
+                }), idx)), jsxRuntime.jsx("li", Object.assign({
+                  css: configureTheme_styles.styles.presetListItem
+                }, {
+                  children: jsxRuntime.jsx("button", Object.assign({
+                    css: configureTheme_styles.styles.presetsButton,
+                    onClick: () => {
+                      toggleShowThemeInput();
+                    }
+                  }, {
+                    children: "Input Custom Theme"
+                  }))
+                }))]
+              }))
+            }))
+          }))]
+        })]
+      })), jsxRuntime.jsx(giger.Typography, Object.assign({
+        role: "heading",
+        variant: "heading4"
+      }, {
+        children: `${selectedTab} Editor`
+      })), renderContentBySelectedTab(themeConfig, selectedTab)]
+    })), showDrawer && jsxRuntime.jsx(drawer.Drawer, Object.assign({
+      "aria-label": "Show themeConfig.js Code Drawer",
+      headerContent: jsxRuntime.jsxs("div", Object.assign({
+        css: configureTheme_styles.styles.drawerHeader
+      }, {
+        children: [jsxRuntime.jsx("pre", Object.assign({
+          css: configureTheme_styles.styles.pre
+        }, {
+          children: "themeConfig.js"
+        })), showDrawer.copyToClipboardText && jsxRuntime.jsx("div", Object.assign({
+          css: configureTheme_styles.styles.copy
+        }, {
+          children: jsxRuntime.jsx(copyButton.CopyButton, {
+            content: showDrawer.copyToClipboardText
+          })
+        }))]
+      })),
+      isOpen: isDrawerOpen,
+      toggleDrawer: () => setIsDrawerOpen(!isDrawerOpen)
+    }, {
+      children: showDrawer.content()
+    }))]
+  }));
+};
+
+exports.ConfigureTheme = ConfigureTheme;

package/cjs/elements/theme-creator/components/configure-theme/configure-theme.styles.cjs

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.dark,
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+    position: "relative"
+  }),
+  content: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(3),
+    padding: styles$1.scopeTheme(theme).spacing(3)
+  }),
+  copy: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.white,
+    borderRadius: "4px",
+    padding: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  drawerHeader: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(2),
+    justifyContent: "end",
+    width: "50%"
+  }),
+  drawerWrapper: {
+    display: "flex",
+    justifyContent: "space-between",
+    position: "relative"
+  },
+  getApplyButtonStyles: disabled => theme => ({
+    "&:hover": {
+      backgroundColor: disabled ? styles$1.scopeTheme(theme).palette.gray.light : "#11003A"
+    },
+    backgroundColor: disabled ? styles$1.scopeTheme(theme).palette.gray.light : "#11003A",
+    borderRadius: styles$1.scopeTheme(theme).spacing(0.5),
+    color: "white",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: "14px",
+    justifyContent: "center",
+    padding: styles$1.scopeTheme(theme).spacing(1),
+    textAlign: "center"
+  }),
+  header: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(2),
+    justifyContent: "space-between"
+  }),
+  inputForm: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${styles$1.scopeTheme(theme).spacing(0)}px ${styles$1.scopeTheme(theme).spacing(1)}px`,
+    width: styles$1.scopeTheme(theme).spacing(30)
+  }),
+  popoverWrapper: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    width: styles$1.scopeTheme(theme).spacing(30)
+  }),
+  pre: theme => ({
+    backgroundColor: "#FFFFFF66",
+    borderRadius: "8px",
+    fontSize: "14px",
+    padding: styles$1.scopeTheme(theme).spacing(0.3)
+  }),
+  presetListItem: theme => ({
+    alignItems: "center",
+    display: "flex",
+    height: styles$1.scopeTheme(theme).spacing(6),
+    justifyContent: "space-between",
+    padding: styles$1.scopeTheme(theme).spacing(1),
+    width: "100%"
+  }),
+  presetOption: theme => ({
+    "&:hover": {
+      backgroundColor: "scopeTheme(theme).palette.gray.ultraLight"
+    },
+    backgroundColor: "transparent",
+    borderRadius: "4px",
+    color: styles$1.scopeTheme(theme).palette.gray.dark,
+    fontSize: "14px",
+    fontWeight: "normal",
+    padding: styles$1.scopeTheme(theme).spacing(0.5),
+    width: "100%"
+  }),
+  presetsButton: theme => ({
+    "&:hover": {
+      backgroundColor: "#d1d4d7"
+    },
+    backgroundColor: "#E4E5E7",
+    borderRadius: "4px",
+    cursor: "pointer",
+    display: "flex",
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S,
+    gap: styles$1.scopeTheme(theme).spacing(0.5),
+    justifyContent: "center",
+    padding: `${styles$1.scopeTheme(theme).spacing(0.5)}px ${styles$1.scopeTheme(theme).spacing(1)}px`,
+    width: "100%"
+  }),
+  textArea: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.S,
+    minHeight: styles$1.scopeTheme(theme).spacing(24),
+    width: "100%"
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/theme-creator/components/configure-theme/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var configureTheme = require('./configure-theme.cjs');
+
+
+
+exports.ConfigureTheme = configureTheme.ConfigureTheme;

package/cjs/elements/theme-creator/components/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var configureTheme = require('./configure-theme/configure-theme.cjs');
+
+
+
+exports.ConfigureTheme = configureTheme.ConfigureTheme;

package/cjs/elements/theme-creator/components/typography-editor/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var typographyEditor = require('./typography-editor.cjs');
+
+
+
+exports.TypographyEditor = typographyEditor.TypographyEditor;