npm - @social-mail/social-mail-client - Versions diffs - 1.0.134 → 1.0.136 - Mend

@social-mail/social-mail-client 1.0.134 → 1.0.136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/dist/admin/AdminAppIndex.pack.js CHANGED Viewed

@@ -1864,8 +1864,8 @@ const UMD = new UMDClass();
 //# sourceMappingURL=umd.js.map
         AmdLoader.instance.register(
-            ["@social-mail/social-mail-client","@web-atoms/core","@web-atoms/web-controls","reflect-metadata","@web-atoms/date-time","@web-atoms/data-styles","@web-atoms/entity","@web-atoms/email-dom","tinycolor2"],
-            ["@social-mail/social-mail-client/dist/admin/AdminAppIndex","@web-atoms/core/dist/Pack","@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp","@web-atoms/web-controls/dist/mobile-app/MobileApp","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomBridge","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/web-controls/dist/PageNavigator","@web-atoms/web-controls/dist/desktop-app/DesktopApp","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/AtomList","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/data-styles/data-styles","@social-mail/social-mail-client/dist/services/LoginService","@social-mail/social-mail-client/dist/services/EntityService","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/models/TaskManager","@web-atoms/entity/dist/models/Queue","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/services/BusyProgress","@social-mail/social-mail-client/dist/model/model","@social-mail/social-mail-client/dist/common/SocialMailApp","@web-atoms/core/dist/core/InjectProperty","@social-mail/social-mail-client/dist/admin/commands/AdminCommands","@social-mail/social-mail-client/dist/admin/pages/home/AdminHome","@social-mail/social-mail-client/dist/admin/pages/domains/DomainListPage","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/WatchProperty","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@social-mail/social-mail-client/dist/admin/pages/domains/services/AdminDomainService","@web-atoms/core/dist/di/DITransient","@web-atoms/core/dist/view-model/Action","@social-mail/social-mail-client/dist/admin/pages/domains/edit/EditDomainPage","@web-atoms/web-controls/dist/basic/Form","@social-mail/social-mail-client/dist/common/controls/form/RequiredFormField","@web-atoms/web-controls/dist/basic/FormField","@web-atoms/web-controls/dist/basic/styles/form-field-style","@web-atoms/web-controls/dist/basic/PasswordBox","@web-atoms/web-controls/dist/basic/styles/password-box-style","@web-atoms/web-controls/dist/basic/Checkbox","@web-atoms/web-controls/dist/basic/styles/checkbox-style","@web-atoms/web-controls/dist/basic/Expander","@web-atoms/web-controls/dist/basic/styles/expander-style","@social-mail/social-mail-client/dist/common/controls/buttons/IconButton","@social-mail/social-mail-client/dist/admin/pages/domains/edit/DomainKeySetupPage","@social-mail/social-mail-client/dist/common/controls/buttons/CopyIcon","@social-mail/social-mail-client/dist/admin/pages/domains/domain-user/DomainUserEditor","@social-mail/social-mail-client/dist/common/controls/drop-downs/user/UserDropDown","@web-atoms/web-controls/dist/basic/DropDown","@web-atoms/web-controls/dist/basic/styles/drop-down-style","@social-mail/social-mail-client/dist/admin/pages/users/services/AdminUserService","@social-mail/social-mail-client/dist/common/Sql","@social-mail/social-mail-client/dist/common/pages/folders/ChooserFolderPage","@social-mail/social-mail-client/dist/web/page/files/service/CloudFileService","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/common/controls/tree/TreeView","@social-mail/social-mail-client/dist/admin/pages/users/UserListPage","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/admin/pages/users/EditUserPage","@social-mail/social-mail-client/dist/common/validators/Validators","@social-mail/social-mail-client/dist/common/controls/password/PasswordStrength","@web-atoms/web-controls/dist/mobile-app/MasterDetailPage","@social-mail/social-mail-client/dist/admin/pages/users/UserDetailsPage","@social-mail/social-mail-client/dist/common/NumberFormats","@social-mail/social-mail-client/dist/common/controls/collection-editor/CollectionEditor","@social-mail/social-mail-client/dist/admin/pages/users/domains/EditDomainUserPage","@social-mail/social-mail-client/dist/admin/pages/users/mailboxes/EditUserMailboxPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/services/MailboxService","@social-mail/social-mail-client/dist/admin/pages/users/files/EditFileAccessPage","@web-atoms/web-controls/dist/basic/ComboBox","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxListPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxEditorPage","@social-mail/social-mail-client/dist/admin/pages/users/ChooseUserPage","@social-mail/social-mail-client/dist/common/commands/CommonCommands","@social-mail/social-mail-client/dist/web/page/mails/MailboxContacts","@social-mail/social-mail-client/dist/web/page/mails/service/MailService","@social-mail/social-mail-client/dist/web/page/mails/ConversationPage","@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService","@web-atoms/email-dom/dist/DomToString","@web-atoms/email-dom/dist/dom/StyleHelper","@web-atoms/email-dom/dist/style/mergeStyle","@social-mail/social-mail-client/dist/common/events/CommonEvents","@web-atoms/web-controls/dist/basic/InlinePopupControl","@social-mail/social-mail-client/dist/web/page/mails/ComposeMailPage","@social-mail/social-mail-client/dist/common/controls/html/InlineHtmlEditorWithToolbar","@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor","@web-atoms/web-controls/dist/html-editor/commands/AddImage","@web-atoms/web-controls/dist/html-editor/commands/CommandButton","@web-atoms/web-controls/dist/html-editor/commands/HtmlCommands","@web-atoms/web-controls/dist/html-editor/commands/Toolbar","@web-atoms/web-controls/dist/html-editor/commands/Bold","@web-atoms/web-controls/dist/html-editor/commands/Command","@web-atoms/web-controls/dist/html-editor/commands/Italic","@web-atoms/web-controls/dist/html-editor/commands/Underline","@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough","@web-atoms/web-controls/dist/html-editor/commands/Align","@web-atoms/web-controls/dist/basic/PopupButton","@web-atoms/web-controls/dist/basic/styles/popup-button-style","@web-atoms/web-controls/dist/html-editor/commands/HorizontalRule","@web-atoms/web-controls/dist/html-editor/commands/Separator","@web-atoms/web-controls/dist/html-editor/commands/Headings","@web-atoms/web-controls/dist/html-editor/commands/ChangeColor","@web-atoms/web-controls/dist/html-editor/commands/ChangeFont","@web-atoms/web-controls/dist/html-editor/commands/ChangeFontSize","@web-atoms/web-controls/dist/html-editor/commands/NumberedList","@web-atoms/web-controls/dist/html-editor/commands/UnorderedList","@web-atoms/web-controls/dist/html-editor/commands/IndentLess","@web-atoms/web-controls/dist/html-editor/commands/IndentMore","@web-atoms/web-controls/dist/html-editor/commands/AddLink","@web-atoms/core/dist/web/controls/AtomToggleButtonBar","@web-atoms/core/dist/web/styles/AtomToggleButtonBarStyle","@web-atoms/core/dist/web/styles/AtomListBoxStyle","@web-atoms/core/dist/web/controls/AtomListBox","@web-atoms/core/dist/web/controls/AtomItemsControl","@web-atoms/core/dist/core/AtomEnumerator","@web-atoms/web-controls/dist/html-editor/commands/Unlink","@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat","@web-atoms/web-controls/dist/html-editor/commands/Source","@web-atoms/web-controls/dist/basic/UploadEvent","@social-mail/social-mail-client/dist/services/files/LocalFileService","@web-atoms/web-controls/dist/basic/TitleEditor","@web-atoms/web-controls/dist/basic/styles/title-editor-style","@social-mail/social-mail-client/dist/common/controls/email-recipients/EmailRecipientChips","@web-atoms/web-controls/dist/basic/AtomChips","@web-atoms/web-controls/dist/basic/Chip","@web-atoms/web-controls/dist/basic/styles/chip-style","@web-atoms/web-controls/dist/basic/styles/chips-style","@web-atoms/web-controls/dist/basic/styles/item-suggestion-style","@social-mail/social-mail-client/dist/services/email-addresses/EmailAddressService","@social-mail/social-mail-client/dist/common/cache/CacheTTL","@social-mail/social-mail-client/dist/web/page/templates/social/SocialTemplate","@social-mail/social-mail-client/dist/services/socket/sockets","@web-atoms/web-controls/dist/basic/LimitedText","@social-mail/social-mail-client/dist/common/date/DateFormats","@social-mail/social-mail-client/dist/common/pages/logs/LogsPage","@social-mail/social-mail-client/dist/common/pages/logs/services/AppLogService","@social-mail/social-mail-client/dist/web/page/mails/detail/MailDetailPage","@social-mail/social-mail-client/dist/web/page/mails/ChooseMailboxPage","@social-mail/social-mail-client/dist/web/commands/AppCommands","@social-mail/social-mail-client/dist/web/page/home/HomePage","@social-mail/social-mail-client/dist/web/page/files/FolderPage","@social-mail/social-mail-client/dist/common/controls/drag-drop/FilesDragDrop","@social-mail/social-mail-client/dist/web/page/files/shares/EditSharesPage","@social-mail/social-mail-client/dist/services/files/FileShareService","@social-mail/social-mail-client/dist/web/page/files/shares/AddSharePage","@web-atoms/web-controls/dist/basic/Switch","@web-atoms/web-controls/dist/basic/styles/switch-style","@web-atoms/web-controls/dist/basic/DateField","@web-atoms/web-controls/dist/basic/Calendar","@web-atoms/web-controls/dist/basic/Select","@web-atoms/web-controls/dist/basic/styles/calendar-style","@web-atoms/web-controls/dist/basic/TimeEditor","@web-atoms/web-controls/dist/basic/styles/time-editor-style","@web-atoms/web-controls/dist/basic/styles/date-field-style","@social-mail/social-mail-client/dist/web/page/templates/EditTemplatePage","@social-mail/social-mail-client/dist/services/mime-service/MimeNode","@social-mail/social-mail-client/dist/common/QueryIterator","@social-mail/social-mail-client/dist/services/mime-service/AttachmentFile","@social-mail/social-mail-client/dist/services/mime-service/HeaderContentType","@social-mail/social-mail-client/dist/services/mime-service/parsePairs","@social-mail/social-mail-client/dist/services/mime-service/tokenizer","@social-mail/social-mail-client/dist/services/mime-service/HeaderContentDisposition","@social-mail/social-mail-client/dist/services/mime-service/encoder/word-encoding","@social-mail/social-mail-client/dist/services/mime-service/encoder/RawBuffer","@social-mail/social-mail-client/dist/services/mime-service/encoder/base64-to-blob","@social-mail/social-mail-client/dist/services/mime-service/encoder/quoted-printable","@social-mail/social-mail-client/dist/services/mime-service/MimeMessage","@social-mail/social-mail-client/dist/services/mime-service/stream/LineStream","@social-mail/social-mail-client/dist/services/mime-service/stream/TextWriter","@social-mail/social-mail-client/dist/common/pages/folders/ChooseTemplatePage","@social-mail/social-mail-client/dist/web/page/channels/detail/ChannelDetailPage","@social-mail/social-mail-client/dist/web/page/channels/subscribers/ChannelSubscribersPage","@social-mail/social-mail-client/dist/web/page/channels/services/ChannelService","@social-mail/social-mail-client/dist/web/page/channels/subscribers/add/AddSubscriberPage","@social-mail/social-mail-client/dist/web/page/channels/subscribers/rights/UpdateRightsPage","@social-mail/social-mail-client/dist/common/pages/drives/DriveListPage","@social-mail/social-mail-client/dist/common/pages/websites/manage/ManageWebSitePage","@social-mail/social-mail-client/dist/services/websites/WebSiteService","@social-mail/social-mail-client/dist/common/pages/websites/studio/WebSiteStudioPage","@social-mail/social-mail-client/dist/common/pages/websites/templates/ChooseWebSiteTemplatePage","@social-mail/social-mail-client/dist/common/controls/tree/FileTreeView","@social-mail/social-mail-client/dist/site-editor/editor/HtmlPageEditor","@social-mail/social-mail-client/dist/web/page/files/media/ChooseMediaPage","@social-mail/social-mail-client/dist/site-editor/blocks/ImageBlock","@social-mail/social-mail-client/dist/site-editor/blocks/Block","@social-mail/social-mail-client/dist/site-editor/drag-drop/DragDropHelper","@social-mail/social-mail-client/dist/site-editor/commands/CodeCommand","@social-mail/social-mail-client/dist/site-editor/commands/EditorCommand","@social-mail/social-mail-client/dist/site-editor/toolbars/UndoRedoToolbar","@social-mail/social-mail-client/dist/site-editor/toolbars/EditorToolbar","@social-mail/social-mail-client/dist/site-editor/blocks/WrapGrid","@social-mail/social-mail-client/dist/site-editor/properties/Properties","@social-mail/social-mail-client/dist/site-editor/properties/groups/LayoutEditor","@social-mail/social-mail-client/dist/site-editor/properties/controls/PropertyEditor","@social-mail/social-mail-client/dist/site-editor/styler/StylerSet","@social-mail/social-mail-client/dist/site-editor/styler/Styler","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/display","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/flex/flex","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/items-position/itemsPosition","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/layout","@social-mail/social-mail-client/dist/site-editor/styler/properties/text/stylerText","@social-mail/social-mail-client/dist/site-editor/properties/groups/TextPropertyEditor","@social-mail/social-mail-client/dist/site-editor/properties/controls/SizeEditorControl","@social-mail/social-mail-client/dist/site-editor/properties/groups/ColorGroupEditor","@social-mail/social-mail-client/dist/site-editor/properties/controls/ColorEditor","tinycolor2/tinycolor","@social-mail/social-mail-client/dist/site-editor/editor/SelectedElement","@social-mail/social-mail-client/dist/common/pages/user/change-password/ChangePasswordPage","@social-mail/social-mail-client/dist/common/pages/user/services/UserService","@social-mail/social-mail-client/dist/common/pages/user/multi-factor/MultiFactorSetupPage","@social-mail/social-mail-client/dist/common/pages/websites/list/WebSiteListPage","@social-mail/social-mail-client/dist/common/pages/websites/edit/WebSiteFolderEditor","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxDetailPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/settings/EditSyncTargetPage","@social-mail/social-mail-client/dist/common/icons/Icons","@social-mail/social-mail-client/dist/admin/pages/relays/edit/EditRelayPage","@social-mail/social-mail-client/dist/common/pages/user/login/LoginPage","@web-atoms/web-controls/dist/basic/ToggleButtonBar","@web-atoms/web-controls/dist/basic/styles/toggle-button-bar-style","@social-mail/social-mail-client/dist/admin/drawer/AdminDrawer","@social-mail/social-mail-client/dist/common/controls/menu/MenuItem","@social-mail/social-mail-client/dist/common/controls/ModuleInfo","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme"]);
+            ["@social-mail/social-mail-client","@web-atoms/core","@web-atoms/web-controls","reflect-metadata","@web-atoms/date-time","@web-atoms/data-styles","@web-atoms/entity","@web-atoms/email-dom"],
+            ["@social-mail/social-mail-client/dist/admin/AdminAppIndex","@web-atoms/core/dist/Pack","@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp","@web-atoms/web-controls/dist/mobile-app/MobileApp","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomBridge","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/web-controls/dist/PageNavigator","@web-atoms/web-controls/dist/desktop-app/DesktopApp","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/AtomList","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/data-styles/data-styles","@social-mail/social-mail-client/dist/services/LoginService","@social-mail/social-mail-client/dist/services/EntityService","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/models/TaskManager","@web-atoms/entity/dist/models/Queue","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/services/BusyProgress","@social-mail/social-mail-client/dist/model/model","@social-mail/social-mail-client/dist/common/SocialMailApp","@web-atoms/core/dist/core/InjectProperty","@social-mail/social-mail-client/dist/admin/commands/AdminCommands","@social-mail/social-mail-client/dist/admin/pages/home/AdminHome","@social-mail/social-mail-client/dist/admin/pages/domains/DomainListPage","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/WatchProperty","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@social-mail/social-mail-client/dist/admin/pages/domains/services/AdminDomainService","@web-atoms/core/dist/di/DITransient","@web-atoms/core/dist/view-model/Action","@social-mail/social-mail-client/dist/admin/pages/domains/edit/EditDomainPage","@web-atoms/web-controls/dist/basic/Form","@social-mail/social-mail-client/dist/common/controls/form/RequiredFormField","@web-atoms/web-controls/dist/basic/FormField","@web-atoms/web-controls/dist/basic/styles/form-field-style","@web-atoms/web-controls/dist/basic/PasswordBox","@web-atoms/web-controls/dist/basic/styles/password-box-style","@web-atoms/web-controls/dist/basic/Checkbox","@web-atoms/web-controls/dist/basic/styles/checkbox-style","@web-atoms/web-controls/dist/basic/Expander","@web-atoms/web-controls/dist/basic/styles/expander-style","@social-mail/social-mail-client/dist/common/controls/buttons/IconButton","@social-mail/social-mail-client/dist/admin/pages/domains/edit/DomainKeySetupPage","@social-mail/social-mail-client/dist/common/controls/buttons/CopyIcon","@social-mail/social-mail-client/dist/admin/pages/domains/domain-user/DomainUserEditor","@social-mail/social-mail-client/dist/common/controls/drop-downs/user/UserDropDown","@web-atoms/web-controls/dist/basic/DropDown","@web-atoms/web-controls/dist/basic/styles/drop-down-style","@social-mail/social-mail-client/dist/admin/pages/users/services/AdminUserService","@social-mail/social-mail-client/dist/common/Sql","@social-mail/social-mail-client/dist/common/pages/folders/ChooserFolderPage","@social-mail/social-mail-client/dist/web/page/files/service/CloudFileService","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/common/controls/tree/TreeView","@social-mail/social-mail-client/dist/admin/pages/users/UserListPage","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/admin/pages/users/EditUserPage","@social-mail/social-mail-client/dist/common/validators/Validators","@social-mail/social-mail-client/dist/common/controls/password/PasswordStrength","@web-atoms/web-controls/dist/mobile-app/MasterDetailPage","@social-mail/social-mail-client/dist/admin/pages/users/UserDetailsPage","@social-mail/social-mail-client/dist/common/NumberFormats","@social-mail/social-mail-client/dist/common/controls/collection-editor/CollectionEditor","@social-mail/social-mail-client/dist/admin/pages/users/domains/EditDomainUserPage","@social-mail/social-mail-client/dist/admin/pages/users/mailboxes/EditUserMailboxPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/services/MailboxService","@social-mail/social-mail-client/dist/admin/pages/users/files/EditFileAccessPage","@web-atoms/web-controls/dist/basic/ComboBox","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxListPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxEditorPage","@social-mail/social-mail-client/dist/admin/pages/users/ChooseUserPage","@social-mail/social-mail-client/dist/common/commands/CommonCommands","@social-mail/social-mail-client/dist/web/page/mails/MailboxContacts","@social-mail/social-mail-client/dist/web/page/mails/service/MailService","@social-mail/social-mail-client/dist/web/page/mails/ConversationPage","@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService","@web-atoms/email-dom/dist/DomToString","@web-atoms/email-dom/dist/dom/StyleHelper","@web-atoms/email-dom/dist/style/mergeStyle","@social-mail/social-mail-client/dist/common/events/CommonEvents","@web-atoms/web-controls/dist/basic/InlinePopupControl","@social-mail/social-mail-client/dist/web/page/mails/ComposeMailPage","@social-mail/social-mail-client/dist/common/controls/html/InlineHtmlEditorWithToolbar","@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor","@web-atoms/web-controls/dist/html-editor/commands/AddImage","@web-atoms/web-controls/dist/html-editor/commands/CommandButton","@web-atoms/web-controls/dist/html-editor/commands/HtmlCommands","@web-atoms/web-controls/dist/html-editor/commands/Toolbar","@web-atoms/web-controls/dist/html-editor/commands/Bold","@web-atoms/web-controls/dist/html-editor/commands/Command","@web-atoms/web-controls/dist/html-editor/commands/Italic","@web-atoms/web-controls/dist/html-editor/commands/Underline","@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough","@web-atoms/web-controls/dist/html-editor/commands/Align","@web-atoms/web-controls/dist/basic/PopupButton","@web-atoms/web-controls/dist/basic/styles/popup-button-style","@web-atoms/web-controls/dist/html-editor/commands/HorizontalRule","@web-atoms/web-controls/dist/html-editor/commands/Separator","@web-atoms/web-controls/dist/html-editor/commands/Headings","@web-atoms/web-controls/dist/html-editor/commands/ChangeColor","@web-atoms/web-controls/dist/html-editor/commands/ChangeFont","@web-atoms/web-controls/dist/html-editor/commands/ChangeFontSize","@web-atoms/web-controls/dist/html-editor/commands/NumberedList","@web-atoms/web-controls/dist/html-editor/commands/UnorderedList","@web-atoms/web-controls/dist/html-editor/commands/IndentLess","@web-atoms/web-controls/dist/html-editor/commands/IndentMore","@web-atoms/web-controls/dist/html-editor/commands/AddLink","@web-atoms/core/dist/web/controls/AtomToggleButtonBar","@web-atoms/core/dist/web/styles/AtomToggleButtonBarStyle","@web-atoms/core/dist/web/styles/AtomListBoxStyle","@web-atoms/core/dist/web/controls/AtomListBox","@web-atoms/core/dist/web/controls/AtomItemsControl","@web-atoms/core/dist/core/AtomEnumerator","@web-atoms/web-controls/dist/html-editor/commands/Unlink","@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat","@web-atoms/web-controls/dist/html-editor/commands/Source","@web-atoms/web-controls/dist/basic/UploadEvent","@social-mail/social-mail-client/dist/services/files/LocalFileService","@web-atoms/web-controls/dist/basic/TitleEditor","@web-atoms/web-controls/dist/basic/styles/title-editor-style","@social-mail/social-mail-client/dist/common/controls/email-recipients/EmailRecipientChips","@web-atoms/web-controls/dist/basic/AtomChips","@web-atoms/web-controls/dist/basic/Chip","@web-atoms/web-controls/dist/basic/styles/chip-style","@web-atoms/web-controls/dist/basic/styles/chips-style","@web-atoms/web-controls/dist/basic/styles/item-suggestion-style","@social-mail/social-mail-client/dist/services/email-addresses/EmailAddressService","@social-mail/social-mail-client/dist/common/cache/CacheTTL","@social-mail/social-mail-client/dist/web/page/templates/social/SocialTemplate","@social-mail/social-mail-client/dist/services/socket/sockets","@web-atoms/web-controls/dist/basic/LimitedText","@social-mail/social-mail-client/dist/common/date/DateFormats","@social-mail/social-mail-client/dist/common/pages/logs/LogsPage","@social-mail/social-mail-client/dist/common/pages/logs/services/AppLogService","@social-mail/social-mail-client/dist/web/page/mails/detail/MailDetailPage","@social-mail/social-mail-client/dist/web/page/mails/ChooseMailboxPage","@social-mail/social-mail-client/dist/web/commands/AppCommands","@social-mail/social-mail-client/dist/web/page/home/HomePage","@social-mail/social-mail-client/dist/web/page/files/FolderPage","@social-mail/social-mail-client/dist/common/controls/drag-drop/FilesDragDrop","@social-mail/social-mail-client/dist/web/page/files/shares/EditSharesPage","@social-mail/social-mail-client/dist/services/files/FileShareService","@social-mail/social-mail-client/dist/web/page/files/shares/AddSharePage","@web-atoms/web-controls/dist/basic/Switch","@web-atoms/web-controls/dist/basic/styles/switch-style","@web-atoms/web-controls/dist/basic/DateField","@web-atoms/web-controls/dist/basic/Calendar","@web-atoms/web-controls/dist/basic/Select","@web-atoms/web-controls/dist/basic/styles/calendar-style","@web-atoms/web-controls/dist/basic/TimeEditor","@web-atoms/web-controls/dist/basic/styles/time-editor-style","@web-atoms/web-controls/dist/basic/styles/date-field-style","@social-mail/social-mail-client/dist/web/page/templates/EditTemplatePage","@social-mail/social-mail-client/dist/services/mime-service/MimeNode","@social-mail/social-mail-client/dist/common/QueryIterator","@social-mail/social-mail-client/dist/services/mime-service/AttachmentFile","@social-mail/social-mail-client/dist/services/mime-service/HeaderContentType","@social-mail/social-mail-client/dist/services/mime-service/parsePairs","@social-mail/social-mail-client/dist/services/mime-service/tokenizer","@social-mail/social-mail-client/dist/services/mime-service/HeaderContentDisposition","@social-mail/social-mail-client/dist/services/mime-service/encoder/word-encoding","@social-mail/social-mail-client/dist/services/mime-service/encoder/RawBuffer","@social-mail/social-mail-client/dist/services/mime-service/encoder/base64-to-blob","@social-mail/social-mail-client/dist/services/mime-service/encoder/quoted-printable","@social-mail/social-mail-client/dist/services/mime-service/MimeMessage","@social-mail/social-mail-client/dist/services/mime-service/stream/LineStream","@social-mail/social-mail-client/dist/services/mime-service/stream/TextWriter","@social-mail/social-mail-client/dist/common/pages/folders/ChooseTemplatePage","@social-mail/social-mail-client/dist/web/page/channels/detail/ChannelDetailPage","@social-mail/social-mail-client/dist/web/page/channels/subscribers/ChannelSubscribersPage","@social-mail/social-mail-client/dist/web/page/channels/services/ChannelService","@social-mail/social-mail-client/dist/web/page/channels/subscribers/add/AddSubscriberPage","@social-mail/social-mail-client/dist/web/page/channels/subscribers/rights/UpdateRightsPage","@social-mail/social-mail-client/dist/common/pages/drives/DriveListPage","@social-mail/social-mail-client/dist/common/pages/websites/manage/ManageWebSitePage","@social-mail/social-mail-client/dist/services/websites/WebSiteService","@social-mail/social-mail-client/dist/common/pages/websites/studio/WebSiteStudioPage","@social-mail/social-mail-client/dist/common/pages/websites/templates/ChooseWebSiteTemplatePage","@social-mail/social-mail-client/dist/common/controls/tree/FileTreeView","@social-mail/social-mail-client/dist/site-editor/editor/HtmlPageEditor","@social-mail/social-mail-client/dist/web/page/files/media/ChooseMediaPage","@social-mail/social-mail-client/dist/site-editor/blocks/ImageBlock","@social-mail/social-mail-client/dist/site-editor/blocks/Block","@social-mail/social-mail-client/dist/site-editor/drag-drop/DragDropHelper","@social-mail/social-mail-client/dist/site-editor/commands/CodeCommand","@social-mail/social-mail-client/dist/site-editor/commands/EditorCommand","@social-mail/social-mail-client/dist/site-editor/toolbars/UndoRedoToolbar","@social-mail/social-mail-client/dist/site-editor/toolbars/EditorToolbar","@social-mail/social-mail-client/dist/site-editor/blocks/WrapGrid","@social-mail/social-mail-client/dist/site-editor/properties/Properties","@social-mail/social-mail-client/dist/site-editor/properties/groups/LayoutEditor","@social-mail/social-mail-client/dist/site-editor/properties/controls/PropertyEditor","@social-mail/social-mail-client/dist/site-editor/styler/StylerSet","@social-mail/social-mail-client/dist/site-editor/styler/Styler","@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerBorder","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/display","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/flex/flex","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/items-position/itemsPosition","@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/layout","@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerPosition","@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerSizes","@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerSpace","@social-mail/social-mail-client/dist/site-editor/styler/properties/text/stylerText","@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerBackground","@social-mail/social-mail-client/dist/site-editor/properties/groups/TextPropertyEditor","@social-mail/social-mail-client/dist/site-editor/properties/controls/SizeEditorControl","@social-mail/social-mail-client/dist/site-editor/properties/groups/BorderGroupEditor","@social-mail/social-mail-client/dist/site-editor/properties/groups/SizeGroupEditor","@social-mail/social-mail-client/dist/site-editor/properties/groups/SpaceGroupEditor","@social-mail/social-mail-client/dist/site-editor/properties/groups/PositionGroupEditor","@social-mail/social-mail-client/dist/site-editor/properties/groups/BackgroundGroupEditor","@social-mail/social-mail-client/dist/site-editor/editor/SelectedElement","@social-mail/social-mail-client/dist/common/pages/user/change-password/ChangePasswordPage","@social-mail/social-mail-client/dist/common/pages/user/services/UserService","@social-mail/social-mail-client/dist/common/pages/user/multi-factor/MultiFactorSetupPage","@social-mail/social-mail-client/dist/common/pages/websites/list/WebSiteListPage","@social-mail/social-mail-client/dist/common/pages/websites/edit/WebSiteFolderEditor","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxDetailPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/settings/EditSyncTargetPage","@social-mail/social-mail-client/dist/common/icons/Icons","@social-mail/social-mail-client/dist/admin/pages/relays/edit/EditRelayPage","@social-mail/social-mail-client/dist/common/pages/user/login/LoginPage","@web-atoms/web-controls/dist/basic/ToggleButtonBar","@web-atoms/web-controls/dist/basic/styles/toggle-button-bar-style","@social-mail/social-mail-client/dist/admin/drawer/AdminDrawer","@social-mail/social-mail-client/dist/common/controls/menu/MenuItem","@social-mail/social-mail-client/dist/common/controls/ModuleInfo","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme"]);
 System.register([], function (_export, _context) {
   "use strict";
@@ -17133,23 +17133,27 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
         padding: 5px;
         margin-right: 5px;
         align-self: center;
-        justify-self: center; }
+        justify-self: center;
+    }
     & > [data-element=header] {
         grid-row-start: 1;
-        grid-column-start: 2; }
+        grid-column-start: 2;
+    }
     & > [data-element=caret] {
         grid-row-start: 1;
         grid-column-start: 3;
         padding: 5px;
-        margin-left: 5px; }
+        margin-left: 5px;
+    }
     & > [data-element=detail] {
         grid-row-start: 2;
         grid-column-start: 1;
         grid-column-end: span 3;
-        margin-top: 5px; }
+        margin-top: 5px;
+    }
     &[data-is-expanded=true] {
         & > [data-element=caret] {
@@ -18219,7 +18223,7 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
           return __awaiter(this, void 0, void 0, function* () {
             const userID = SocialMailApp.user.userID;
             let q = this.entityService.query(AppFile).where(x => x.isFolder === true && x.parentID === null && x.path !== null);
-            q = site ? q.where(x => x.websiteFolder.folderID !== null) : q.where(x => x.websiteFolder.folderID === null);
+            q = site ? q.where(x => x.contentType !== "folder") : q.where(x => x.contentType === "folder");
             const top = yield q.orderByDescending({
               userID
             }, p => x => x.userPins.some(s => p.userID === s.userID)).thenByDescending(x => x.dateUpdated).include(x => x.creator).toPagedList({
@@ -24376,71 +24380,87 @@ System.register(["tslib", "@web-atoms/core/dist/App", "@web-atoms/core/dist/core
             return detail.files;
           });
         }
-        upload(files, extra, ct) {
+        sha256(blob) {
           return __awaiter(this, void 0, void 0, function* () {
-            return files.map(file => {
-              const uploadFile = {
-                name: file.name
+            const msgBuffer = yield blob.arrayBuffer();
+            const hashBuffer = yield crypto.subtle.digest('SHA-256', msgBuffer);
+            const hashArray = Array.from(new Uint8Array(hashBuffer));
+            const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+            return hashHex;
+          });
+        }
+        uploadFile(file, extra, ct, progress) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const sha256 = yield this.sha256(file);
+            return new Promise((resolve, reject) => {
+              const body = new FormData();
+              body.append(file.name, file, file.name);
+              body.append("sha256", sha256);
+              const xhr = new XMLHttpRequest();
+              const onError = () => {
+                reject(new Error(xhr.responseText || "Error"));
               };
-              uploadFile.promise = new Promise((resolve, reject) => {
-                const body = new FormData();
-                body.append(file.name, file, file.name);
-                const xhr = new XMLHttpRequest();
-                const onError = () => {
-                  reject(new Error(xhr.responseText || "Error"));
-                };
-                ct === null || ct === void 0 ? void 0 : ct.registerForCancel(() => xhr.abort());
-                xhr.upload.addEventListener("progress", event => {
-                  if (event.lengthComputable) {
-                    uploadFile.progress = event.loaded / event.total;
-                  }
-                });
-                xhr.upload.addEventListener("timeout", onError);
-                xhr.upload.addEventListener("error", onError);
-                xhr.upload.addEventListener("abort", onError);
-                xhr.addEventListener("timeout", onError);
-                xhr.addEventListener("abort", onError);
-                xhr.addEventListener("error", onError);
-                xhr.upload.addEventListener("progress", event => {
-                  if (event.lengthComputable) {
-                    uploadFile.progress = event.loaded / event.total;
-                  }
-                });
-                xhr.addEventListener("load", () => {
-                  if (xhr.status <= 300) {
-                    const r = Object.assign(Object.assign({}, JSON.parse(xhr.responseText)), {
-                      file
-                    });
-                    resolve(r);
-                  }
-                });
-                let postUrl = "/api/upload";
-                const s = new URLSearchParams();
-                if (extra) {
-                  if (typeof extra === "string") {
-                    extra = JSON.parse(extra);
-                  }
-                  for (const key in extra) {
-                    if (Object.prototype.hasOwnProperty.call(extra, key)) {
-                      const element = extra[key];
-                      if (element) {
-                        s.append(key, element);
-                      }
+              ct === null || ct === void 0 ? void 0 : ct.registerForCancel(() => xhr.abort());
+              xhr.upload.addEventListener("progress", event => {
+                if (event.lengthComputable) {
+                  progress === null || progress === void 0 ? void 0 : progress(event.loaded / event.total);
+                }
+              });
+              xhr.upload.addEventListener("timeout", onError);
+              xhr.upload.addEventListener("error", onError);
+              xhr.upload.addEventListener("abort", onError);
+              xhr.addEventListener("timeout", onError);
+              xhr.addEventListener("abort", onError);
+              xhr.addEventListener("error", onError);
+              xhr.upload.addEventListener("progress", event => {
+                if (event.lengthComputable) {
+                  progress === null || progress === void 0 ? void 0 : progress(event.loaded / event.total);
+                }
+              });
+              xhr.addEventListener("load", () => {
+                if (xhr.status <= 300) {
+                  const r = Object.assign(Object.assign({}, JSON.parse(xhr.responseText)), {
+                    file
+                  });
+                  resolve(r);
+                }
+              });
+              let postUrl = "/api/upload";
+              const s = new URLSearchParams();
+              if (extra) {
+                if (typeof extra === "string") {
+                  extra = JSON.parse(extra);
+                }
+                for (const key in extra) {
+                  if (Object.prototype.hasOwnProperty.call(extra, key)) {
+                    const element = extra[key];
+                    if (element) {
+                      s.append(key, element);
                     }
                   }
                 }
-                if (file.webkitRelativePath) {
-                  const folders = file.webkitRelativePath.split("/");
-                  folders.pop();
-                  if (folders.length) {
-                    const folder = folders.join("/");
-                    s.append("folder", folder);
-                  }
+              }
+              if (file.webkitRelativePath) {
+                const folders = file.webkitRelativePath.split("/");
+                folders.pop();
+                if (folders.length) {
+                  const folder = folders.join("/");
+                  s.append("folder", folder);
                 }
-                postUrl += "?" + s.toString();
-                xhr.open("POST", postUrl, true);
-                xhr.send(body);
-              });
+              }
+              postUrl += "?" + s.toString();
+              xhr.open("POST", postUrl, true);
+              xhr.send(body);
+            });
+          });
+        }
+        upload(files, extra, ct) {
+          return __awaiter(this, void 0, void 0, function* () {
+            return files.map(file => {
+              const uploadFile = {
+                name: file.name
+              };
+              uploadFile.promise = this.uploadFile(file, extra, ct, n => uploadFile.progress = n);
               return uploadFile;
             });
           });
@@ -31179,9 +31199,12 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               })
             }, XNode.create("button", {
               text: "Edit"
-            })), XNode.create("button", {
+            })), XNode.create("a", {
+              href: `/api/site/draft/${this.parameters.id}`,
+              target: "_blank"
+            }, XNode.create("button", {
               text: "Preview"
-            })), XNode.create("div", null, XNode.create("h5", null, "Versions"), XNode.create("div", null, ...((_a = this.model.versions) !== null && _a !== void 0 ? _a : []).map(v => XNode.create("div", null, v.snapshotFolderID)))));
+            }))), XNode.create("div", null, XNode.create("h5", null, "Versions"), XNode.create("div", null, ...((_a = this.model.versions) !== null && _a !== void 0 ? _a : []).map(v => XNode.create("div", null, v.snapshotFolderID)))));
           });
         }
       });
@@ -31554,7 +31577,7 @@ System.register(["tslib", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "
               itemRenderer: item => XNode.create("div", {
                 class: "media-file"
               }, XNode.create("img", {
-                src: `/api/files/jpg(300)/${item.appFileID}/${item.fileContentID}/${item.name}.300.jpg`
+                src: `/api/files/webp(300)/${item.appFileID}/${item.fileContentID}/${item.name}.300.webp`
               }))
             })));
             this.footerRenderer = () => XNode.create("div", {
@@ -32032,24 +32055,28 @@ System.register(["./Block"], function (_export, _context) {
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/WrapGrid");
-System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/web-controls/dist/basic/Expander", "@web-atoms/web-controls/dist/basic/Select", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/AtomBinder"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/web-controls/dist/basic/Expander", "@web-atoms/web-controls/dist/basic/Select", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
-  var __rest, XNode, AtomControl, Expander, Select, Bind, AtomBinder, SizeEditor, BindEditor, BindStyleValue;
+  var __rest, XNode, AtomControl, Expander, Select, Bind, styled, BindEditor, BindStyleValue, BindStyleCustom;
   function PropertyEditor(_a, ...nodes) {
+    var _b;
     var {
-        label = void 0
+        label = void 0,
+        custom = void 0
       } = _a,
-      a = __rest(_a, ["label"]);
+      a = __rest(_a, ["label", "custom"]);
     if (!label && nodes.length === 1) {
       return nodes[0];
     }
+    for (const iterator of nodes) {
+      ((_b = iterator.attributes) !== null && _b !== void 0 ? _b : iterator.attributes = {})["data-element"] = "editor";
+    }
     return XNode.create("div", Object.assign({
-      "data-element": "property-editor",
-      "data-layout": "row"
+      "data-element": "property-editor"
     }, a), label && XNode.create("label", {
       "data-font-size": "small"
-    }, label), ...nodes);
+    }, label), ...nodes, custom);
   }
   function ExpanderPropertyEditor(_a, ...nodes) {
     var {
@@ -32061,8 +32088,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       "data-layout": "vertical-flex-stretch-items"
     }, ...nodes) : nodes[0];
     return XNode.create(Expander, Object.assign({
-      isExpanded: isExpanded,
-      "data-element": "property-editor"
+      isExpanded: isExpanded
     }, a), label && XNode.create("label", null, label), child);
   }
   function DropDownProperty(_a) {
@@ -32072,53 +32098,37 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       } = _a,
       a = __rest(_a, ["label", "property"]);
     return XNode.create(PropertyEditor, Object.assign({
-      label: label
+      label: label,
+      custom: XNode.create("input", Object.assign({
+        type: "text",
+        "data-element": "custom"
+      }, BindStyleCustom(property.key)))
     }, a), XNode.create(Select, Object.assign({}, BindStyleValue(property.key), {
       "data-flex": "stretch-full",
       valuePath: v => v.value,
       items: [{
         label: "-",
         value: ""
-      }, ...property.values.map(pair => ({
-        label: pair.name,
-        value: pair.name
-      }))]
+      }, ...property.values.map(pair => pair.toPair())]
     })));
   }
-  function SizeProperty(_a) {
+  function NumberProperty(_a) {
     var {
         label,
         property
       } = _a,
       a = __rest(_a, ["label", "property"]);
-    const se = new SizeEditor(property);
-    return XNode.create("div", {
-      "data-element": "property-editor",
-      "data-layout": "vertical-flex-stretch-items"
-    }, XNode.create("input", Object.assign({
-      type: "hidden",
-      "style-display": "none"
-    }, BindStyleValue(property.key))), XNode.create("div", {
-      "data-layout": "row"
-    }, XNode.create("label", null, label), XNode.create("input", {
-      type: "checkbox",
-      checked: Bind.sourceTwoWays(se, x => x.source.custom)
-    })), XNode.create("div", null, XNode.create("input", {
-      "style-display": Bind.source(se, x => !x.source.custom),
-      type: "range",
-      min: 0,
-      max: se.values.length - 2,
-      value: Bind.sourceTwoWays(se, x => x.source.valueAsNumber)
-    }), XNode.create("input", {
-      "style-display": Bind.source(se, x => x.source.custom),
-      type: "text",
-      value: Bind.sourceTwoWays(se, x => x.source.value)
+    return XNode.create(PropertyEditor, Object.assign({
+      label: label
+    }, a), XNode.create("input", Object.assign({}, BindStyleValue(property.key), {
+      "data-flex": "stretch-full",
+      type: "tel"
     })));
   }
   _export({
     ExpanderPropertyEditor: ExpanderPropertyEditor,
     DropDownProperty: DropDownProperty,
-    SizeProperty: SizeProperty
+    NumberProperty: NumberProperty
   });
   return {
     setters: [function (_tslib) {
@@ -32133,64 +32143,48 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
       Select = _webAtomsWebControlsDistBasicSelect.default;
     }, function (_webAtomsCoreDistCoreBind) {
       Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistCoreAtomBinder) {
-      AtomBinder = _webAtomsCoreDistCoreAtomBinder.AtomBinder;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
     }],
     execute: function () {
       _export("BindEditor", BindEditor = Bind.forControl());
-      _export("BindStyleValue", BindStyleValue = AtomControl.registerProperty("data-style-property", "custom", (c, e, v) => {
+      _export("BindStyleValue", BindStyleValue = AtomControl.registerProperty("data-style-property", "value", (c, e, v) => {
         const editor = c;
         const pv = editor.selection.style(v);
         c.render(XNode.create("div", {
           value: Bind.sourceTwoWays(pv, s => s.source.value)
         }), e, c);
       }));
-      SizeEditor = class SizeEditor {
-        get custom() {
-          return this.value === "custom";
-        }
-        set custom(v) {
-          if (v) {
-            this.value = "custom";
-          } else if (this._old) {
-            this.value = this._old;
-          }
-        }
-        get value() {
-          return this._value;
-        }
-        set value(v) {
-          if (this._isChanging) {
-            return;
-          }
-          this._isChanging = true;
-          this._value = v;
-          this._old = v && v !== "custom" ? v : this._old;
-          AtomBinder.refreshValue(this, "value");
-          AtomBinder.refreshValue(this, "valueAsNumber");
-          AtomBinder.refreshValue(this, "custom");
-          this._isChanging = false;
-        }
-        get valueAsNumber() {
-          var _a;
-          const v = this.value;
-          if (!v || v === "custom") {
-            return 0;
-          }
-          return (_a = this.values.findIndex(item => item.name === v)) !== null && _a !== void 0 ? _a : 0;
-        }
-        set valueAsNumber(v) {
-          var _a;
-          this.value = ((_a = this.values[v]) === null || _a === void 0 ? void 0 : _a.name) || this._old;
-        }
-        constructor(p) {
-          this._value = "";
-          this._isChanging = false;
-          this._old = "";
-          this.values = p.values.filter(x => x.name !== "custom");
-          this._old = this.values[0].name;
-        }
-      };
+      _export("BindStyleCustom", BindStyleCustom = AtomControl.registerProperty("data-style-property", "value", (c, e, v) => {
+        const editor = c;
+        const pv = editor.selection.style(v);
+        c.render(XNode.create("div", {
+          "style-display": Bind.source(pv, s => s.source.value === "custom"),
+          value: Bind.sourceTwoWays(pv, s => s.source.custom)
+        }), e, c);
+      }));
+      styled.css`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    column-gap: 5px;
+    & > label {
+        grid-row: 1;
+        grid-column: 1;
+    }
+    & > [data-element=editor] {
+        grid-row: 1;
+        grid-column: 2;
+    }
+    & > [data-element=custom] {
+        grid-row: 2;
+        grid-column: 1 / span 2;
+    }
+    `.installGlobal("[data-element=property-editor]");
     }
   };
 });
@@ -32201,7 +32195,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
 System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
-  var styled, StylerVariable, StylerPropertyOption, StylerProperty, camelToSnakeCase, prepareVariables, stylerVars, pair, createSet;
+  var styled, StylerVariable, StylerPropertyOption, StylerProperty, camelToSnakeCase, prepareVariables, stylerVars, sizeVarList, colorVarList, pair, createSet, createVarSet;
   _export({
     StylerVariable: void 0,
     StylerPropertyOption: void 0,
@@ -32237,6 +32231,19 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
         sizeDefault: "10px",
         sizeLarger: "15px",
         sizeLarge: "20px",
+        relSizeXS: "20rem",
+        relSizeSmall: "24rem",
+        relSizeMedium: "28rem",
+        relSizeLarge: "32rem",
+        relSizeXL: "36rem",
+        relSize2XL: "42rem",
+        relSize3XL: "48rem",
+        relSize4XL: "56rem",
+        relSize5XL: "64rem",
+        relSize6XL: "72rem",
+        relSize7XL: "80rem",
+        relSizeFull: "100%",
+        relSizeProse: "65ch",
         defaultColor: "canvas",
         defaultTextColor: "canvastext",
         borderColor: "lightgray",
@@ -32266,6 +32273,8 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
         menuColor: "#F0F0F0",
         linkColor: "blue"
       }));
+      _export("sizeVarList", sizeVarList = [stylerVars.sizeTiny, stylerVars.sizeSmall, stylerVars.sizeSmaller, stylerVars.sizeDefault, stylerVars.sizeLarger, stylerVars.sizeLarge, stylerVars.relSizeXS, stylerVars.relSizeSmall, stylerVars.relSizeMedium, stylerVars.relSizeLarge, stylerVars.relSizeXL, stylerVars.relSize2XL, stylerVars.relSize3XL, stylerVars.relSize4XL, stylerVars.relSize5XL, stylerVars.relSize6XL, stylerVars.relSize7XL, stylerVars.relSizeFull, stylerVars.relSizeProse]);
+      _export("colorVarList", colorVarList = [stylerVars.defaultColor, stylerVars.defaultTextColor, stylerVars.accentColor, stylerVars.accentTextColor, stylerVars.acceptColor, stylerVars.accentTextColor, stylerVars.borderColor, stylerVars.goColor, stylerVars.goTextColor, stylerVars.headerColor, stylerVars.headerTextColor, stylerVars.hoverColor, stylerVars.hoverTextColor, stylerVars.linkColor, stylerVars.noteColor, stylerVars.noteTextColor, stylerVars.rejectColor, stylerVars.rejectTextColor, stylerVars.selectionColor, stylerVars.selectionTextColor, stylerVars.stopColor, stylerVars.stopTextColor, stylerVars.warningColor, stylerVars.warningTextColor]);
       _export("StylerVariable", StylerVariable = class StylerVariable {
         constructor(name, value) {
           this.name = name;
@@ -32276,13 +32285,23 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
         }
       });
       _export("StylerPropertyOption", StylerPropertyOption = class StylerPropertyOption {
-        constructor(name, value) {
+        constructor(name, value, description) {
           this.name = name;
+          this.description = description;
           this.value = value.toString();
         }
         toString() {
           return this.value.split("\n").join("\n\t");
         }
+        toPair() {
+          const description = this.description;
+          const label = description ? `${this.name} (${description})` : this.name;
+          const value = this.name;
+          return {
+            label,
+            value
+          };
+        }
       });
       _export("StylerProperty", StylerProperty = class StylerProperty {
         static create(key, styles) {
@@ -32294,7 +32313,7 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
           for (const k in values) {
             if (Object.prototype.hasOwnProperty.call(values, k)) {
               const element = values[k];
-              this.values.push(new StylerPropertyOption(k, element.expand(`[${this.key}=${k}]`)));
+              this.values.push(new StylerPropertyOption(k, element.expand(`[${this.key}=${k}]`), element.description));
             }
           }
         }
@@ -32323,6 +32342,16 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
         }
         return r;
       });
+      _export("createVarSet", createVarSet = (name, values, addCustom = true) => {
+        const r = {};
+        if (addCustom) {
+          r.custom = styled.css`${name}: var(--styler-${name});`;
+        }
+        for (const iterator of values) {
+          r[iterator.name] = styled.css`\t${name}: var(--${iterator.name});`.withDescription(iterator.value);
+        }
+        return r;
+      });
     }
   };
 });
@@ -32330,6 +32359,40 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/Styler");
+System.register(["@web-atoms/core/dist/style/styled", "../Styler"], function (_export, _context) {
+  "use strict";
+  var styled, StylerProperty, colorVarList, createVarSet, sizeVarList, stylerBorder;
+  return {
+    setters: [function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      colorVarList = _Styler.colorVarList;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
+    }],
+    execute: function () {
+      _export("stylerBorder", stylerBorder = {
+        stylerBorder: new StylerProperty("styler-border", {
+          "none": styled.css`
+                border: none !important;
+            `,
+          "lightgray": styled.css`
+                border: solid 1px lightgray;
+            `
+        }),
+        stylerBorderRadius: new StylerProperty("styler-border-radius", createVarSet("border-radius", sizeVarList)),
+        stylerBorderWidth: new StylerProperty("styler-border-width", createVarSet("border-width", sizeVarList)),
+        stylerBorderColor: new StylerProperty("styler-border-color", createVarSet("border-color", colorVarList))
+      });
+    }
+  };
+});
+//# sourceMappingURL=stylerBorder.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerBorder");
 System.register(["../../Styler"], function (_export, _context) {
   "use strict";
@@ -32369,21 +32432,27 @@ System.register(["../../../Styler"], function (_export, _context) {
 System.register(["../../../Styler"], function (_export, _context) {
   "use strict";
-  var StylerProperty, createSet, pair, itemPositions;
+  var StylerProperty, createSet, createVarSet, pair, sizeVarList, itemPositions;
   return {
     setters: [function (_Styler) {
       StylerProperty = _Styler.StylerProperty;
       createSet = _Styler.createSet;
+      createVarSet = _Styler.createVarSet;
       pair = _Styler.pair;
+      sizeVarList = _Styler.sizeVarList;
     }],
     execute: function () {
       _export("itemPositions", itemPositions = {
         stylerAlignContent: new StylerProperty("styler-align-content", createSet("align-content", ["center", "start", "end", "flex-start", "flex-end", "normal", "baseline", "space-between", "space-around", "space-evenly", "stretch", pair("safe-center", "safe center"), pair("unsafe-center", "unsafe center"), pair("first-baseline", "first baseline"), pair("last-baseline", "last baseline")])),
         stylerAlignItems: new StylerProperty("styler-align-items", createSet("align-items", ["normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "baseline", pair("first baseline"), pair("last baseline"), pair("safe center"), pair("unsafe center")])),
         stylerAlignSelf: new StylerProperty("styler-align-self", createSet("align-self", ["normal", "auto", "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "baseline", pair("first baseline"), pair("last baseline"), "stretch", pair("safe center"), pair("unsafe center")])),
-        stylerFlexJustifyItems: new StylerProperty("styler-justify-items", createSet("justify-items", ["normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "left", "right", "baseline", pair("first baseline"), pair("last baseline"), pair("safe center"), pair("unsafe center"), pair("legacy right"), pair("legacy left"), pair("legacy center")])),
+        stylerJustifyItems: new StylerProperty("styler-justify-items", createSet("justify-items", ["normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "left", "right", "baseline", pair("first baseline"), pair("last baseline"), pair("safe center"), pair("unsafe center"), pair("legacy right"), pair("legacy left"), pair("legacy center")])),
         stylerJustifyContent: new StylerProperty("styler-justify-content", createSet("justify-content", ["center", "start", "end", "flex-start", "flex-end", "left", "right", "normal", "space-between", "space-around", "space-evenly", "stretch", pair("safe center"), pair("unsafe center")])),
-        stylerJustifySelf: new StylerProperty("styler-justify-self", createSet("justify-self", ["auto", "normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "left", "right", "baseline", pair("first baseline"), pair("last baseline"), pair("safe center"), pair("unsafe center")]))
+        stylerJustifySelf: new StylerProperty("styler-justify-self", createSet("justify-self", ["auto", "normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "left", "right", "baseline", pair("first baseline"), pair("last baseline"), pair("safe center"), pair("unsafe center")])),
+        stylerGap: new StylerProperty("styler-gap", createVarSet("gap", sizeVarList)),
+        stylerRowGap: new StylerProperty("styler-row-gap", createVarSet("row-gap", sizeVarList)),
+        stylerColumnGap: new StylerProperty("styler-column-gap", createVarSet("column-gap", sizeVarList)),
+        stylerFlexWrap: new StylerProperty("styler-flex-wrap", createSet("flex-wrap", ["none", "wrap"]))
       });
     }
   };
@@ -32468,20 +32537,118 @@ System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layout/layout");
-System.register(["../../Styler"], function (_export, _context) {
+System.register(["../Styler"], function (_export, _context) {
+  "use strict";
+  var StylerProperty, createSet, createVarSet, sizeVarList, stylerPosition;
+  return {
+    setters: [function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      createSet = _Styler.createSet;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
+    }],
+    execute: function () {
+      _export("stylerPosition", stylerPosition = {
+        stylerPosition: new StylerProperty("styler-position", createSet("position", ["absolute", "relative", "static", "sticky", "fixed"])),
+        stylerLeft: new StylerProperty("styler-left", createVarSet("left", sizeVarList)),
+        stylerTop: new StylerProperty("styler-top", createVarSet("top", sizeVarList)),
+        stylerRight: new StylerProperty("styler-right", createVarSet("right", sizeVarList)),
+        stylerBottom: new StylerProperty("styler-bottom", createVarSet("bottom", sizeVarList))
+      });
+    }
+  };
+});
+//# sourceMappingURL=stylerPosition.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerPosition");
+System.register(["../Styler"], function (_export, _context) {
+  "use strict";
+  var StylerProperty, createVarSet, sizeVarList, stylerSizes;
+  return {
+    setters: [function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
+    }],
+    execute: function () {
+      _export("stylerSizes", stylerSizes = {
+        stylerWidth: new StylerProperty("styler-width", createVarSet("width", sizeVarList)),
+        stylerMinWidth: new StylerProperty("styler-min-width", createVarSet("min-width", sizeVarList)),
+        stylerMaxWidth: new StylerProperty("styler-max-width", createVarSet("max-width", sizeVarList)),
+        stylerHeight: new StylerProperty("styler-height", createVarSet("height", sizeVarList)),
+        stylerMinHeight: new StylerProperty("styler-min-height", createVarSet("min-height", sizeVarList)),
+        stylerMaxHeight: new StylerProperty("styler-max-height", createVarSet("max-height", sizeVarList))
+      });
+    }
+  };
+});
+//# sourceMappingURL=stylerSizes.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerSizes");
+System.register(["../Styler"], function (_export, _context) {
   "use strict";
-  var StylerProperty, createSet, stylerText;
+  var StylerProperty, createVarSet, sizeVarList, stylerSpace;
   return {
     setters: [function (_Styler) {
       StylerProperty = _Styler.StylerProperty;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
+    }],
+    execute: function () {
+      _export("stylerSpace", stylerSpace = {
+        stylerPadding: new StylerProperty("styler-padding", createVarSet("padding", sizeVarList)),
+        stylerPaddingLeft: new StylerProperty("styler-padding-left", createVarSet("padding-left", sizeVarList)),
+        stylerPaddingTop: new StylerProperty("styler-padding-top", createVarSet("padding-top", sizeVarList)),
+        stylerPaddingRight: new StylerProperty("styler-padding-right", createVarSet("padding-right", sizeVarList)),
+        stylerPaddingBottom: new StylerProperty("styler-padding-bottom", createVarSet("padding-bottom", sizeVarList)),
+        stylerMargin: new StylerProperty("styler-margin", createVarSet("margin", sizeVarList)),
+        stylerMarginLeft: new StylerProperty("styler-margin-left", createVarSet("margin-left", sizeVarList)),
+        stylerMarginTop: new StylerProperty("styler-margin-top", createVarSet("margin-top", sizeVarList)),
+        stylerMarginRight: new StylerProperty("styler-margin-right", createVarSet("margin-right", sizeVarList)),
+        stylerMarginBottom: new StylerProperty("styler-margin-bottom", createVarSet("margin-bottom", sizeVarList))
+      });
+    }
+  };
+});
+//# sourceMappingURL=stylerSpace.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerSpace");
+System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function (_export, _context) {
+  "use strict";
+  var styled, StylerProperty, colorVarList, createSet, createVarSet, sizeVarList, stylerText;
+  return {
+    setters: [function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      colorVarList = _Styler.colorVarList;
       createSet = _Styler.createSet;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
     }],
     execute: function () {
       _export("stylerText", stylerText = {
+        stylerColor: new StylerProperty("styler-color", createVarSet("color", colorVarList)),
+        stylerFontFamily: new StylerProperty("styler-font-family", createSet("font-family", [], false, true)),
         stylerFontSize: new StylerProperty("styler-font-size", createSet("font-size", ["xx-small", "x-small", "small", "smaller", "medium", "large", "larger", "x-large", "xx-large"], false, true)),
         stylerFontWeight: new StylerProperty("styler-font-weight", createSet("font-weight", ["normal", "bold", "bolder", "lighter"], false, true)),
-        stylerFontStyle: new StylerProperty("styler-font-style", createSet("font-style", ["normal", "italic", "oblique"], false, true))
+        stylerFontStyle: new StylerProperty("styler-font-style", createSet("font-style", ["normal", "italic", "oblique"], false, true)),
+        stylerTextAlign: new StylerProperty("styler-text-align", createSet("text-align", ["left", "right", "center", "justify"])),
+        stylerLineHeight: new StylerProperty("styler-line-height", {
+          "custom": styled.css`line-height: var(--styler-line-height);`
+        }),
+        stylerLetterSpacing: new StylerProperty("styler-letter-spacing", createVarSet("letter-spacing", sizeVarList)),
+        stylerTextDecoration: new StylerProperty("styler-text-decoration", createSet("text-decoration", ["none", "underline", "overline", "line-through"])),
+        stylerTextTransform: new StylerProperty("styler-text-transform", createSet("text-transform", ["none", "capitalize", "uppercase", "lowercase"])),
+        stylerDirection: new StylerProperty("styler-direction", createSet("direction", ["ltr", "rtl"])),
+        stylerWhiteSpace: new StylerProperty("styler-white-space", createSet("white-space", ["normal", "break-spaces", "nowrap", "pre", "pre-line", "pre-wrap"]))
       });
     }
   };
@@ -32490,15 +32657,61 @@ System.register(["../../Styler"], function (_export, _context) {
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/text/stylerText");
-System.register(["./Styler", "./properties/layout/display", "./properties/layout/flex/flex", "./properties/layout/items-position/itemsPosition", "./properties/layout/layout", "./properties/text/stylerText"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/style/styled", "../Styler"], function (_export, _context) {
   "use strict";
-  var StylerVariable, stylerVars, stylerDisplay, stylerFlexDirection, itemPositions, stylerLayout, stylerText, StylerSet, vars;
+  var styled, StylerProperty, colorVarList, createSet, createVarSet, sizeVarList, stylerBackground;
+  return {
+    setters: [function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      colorVarList = _Styler.colorVarList;
+      createSet = _Styler.createSet;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
+    }],
+    execute: function () {
+      _export("stylerBackground", stylerBackground = {
+        stylerBackground: new StylerProperty("styler-background", {
+          "none": styled.css`background: none;`,
+          "custom": styled.css`background: var(--styler-background);`
+        }),
+        stylerBackgroundColor: new StylerProperty("styler-background-color", createVarSet("background-color", colorVarList)),
+        stylerBackgroundImage: new StylerProperty("styler-background-image", {
+          "none": styled.css`background-image: none;`,
+          "custom": styled.css`background-image: var(--styler-background-image);`
+        }),
+        stylerBackgroundPosition: new StylerProperty("styler-background-position", {
+          "custom": styled.css`background-position: var(--styler-background-position);`
+        }),
+        stylerBackgroundPositionX: new StylerProperty("styler-background-position-x", createVarSet("background-position-x", sizeVarList)),
+        stylerBackgroundPositionY: new StylerProperty("styler-background-position-y", createVarSet("background-position-y", sizeVarList)),
+        stylerBackgroundSize: new StylerProperty("styler-background-size", {
+          "custom": styled.css`background-size: var(--styler-background-size);`
+        }),
+        stylerBackgroundRepeat: new StylerProperty("styler-background-repeat", createSet("background-repeat", ["no-repeat", "repeat", "repeat-x", "repeat-y", "round", "space"])),
+        stylerBackgroundAttachment: new StylerProperty("styler-background-attachment", createSet("background-attachment", ["fixed", "local", "scroll"])),
+        stylerBackgroundOrigin: new StylerProperty("styler-background-origin", createSet("background-origin", ["border-box", "content-box", "padding-box"]))
+      });
+    }
+  };
+});
+//# sourceMappingURL=stylerBackground.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerBackground");
+System.register(["./Styler", "./properties/stylerBorder", "./properties/layout/display", "./properties/layout/flex/flex", "./properties/layout/items-position/itemsPosition", "./properties/layout/layout", "./properties/stylerPosition", "./properties/stylerSizes", "./properties/stylerSpace", "./properties/text/stylerText", "./properties/stylerBackground"], function (_export, _context) {
+  "use strict";
+  var StylerVariable, stylerVars, stylerBorder, stylerDisplay, stylerFlexDirection, itemPositions, stylerLayout, stylerPosition, stylerSizes, stylerSpace, stylerText, stylerBackground, StylerSet, vars;
   _export("StylerSet", void 0);
   return {
     setters: [function (_Styler) {
       StylerVariable = _Styler.StylerVariable;
       stylerVars = _Styler.stylerVars;
+    }, function (_propertiesStylerBorder) {
+      stylerBorder = _propertiesStylerBorder.stylerBorder;
     }, function (_propertiesLayoutDisplay) {
       stylerDisplay = _propertiesLayoutDisplay.stylerDisplay;
     }, function (_propertiesLayoutFlexFlex) {
@@ -32507,8 +32720,16 @@ System.register(["./Styler", "./properties/layout/display", "./properties/layout
       itemPositions = _propertiesLayoutItemsPositionItemsPosition.itemPositions;
     }, function (_propertiesLayoutLayout) {
       stylerLayout = _propertiesLayoutLayout.stylerLayout;
+    }, function (_propertiesStylerPosition) {
+      stylerPosition = _propertiesStylerPosition.stylerPosition;
+    }, function (_propertiesStylerSizes) {
+      stylerSizes = _propertiesStylerSizes.stylerSizes;
+    }, function (_propertiesStylerSpace) {
+      stylerSpace = _propertiesStylerSpace.stylerSpace;
     }, function (_propertiesTextStylerText) {
       stylerText = _propertiesTextStylerText.stylerText;
+    }, function (_propertiesStylerBackground) {
+      stylerBackground = _propertiesStylerBackground.stylerBackground;
     }],
     execute: function () {
       vars = [];
@@ -32521,11 +32742,11 @@ System.register(["./Styler", "./properties/layout/display", "./properties/layout
       _export("StylerSet", StylerSet = class StylerSet {
         constructor() {
           this.vars = vars;
-          this.properties = Object.assign(Object.assign({
+          this.properties = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
             stylerLayout,
             stylerDisplay,
             stylerFlexDirection
-          }, itemPositions), stylerText);
+          }, stylerBorder), itemPositions), stylerText), stylerSizes), stylerSpace), stylerPosition), stylerBackground);
         }
         toString() {
           const properties = [];
@@ -32571,11 +32792,38 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
     }), XNode.create(DropDownProperty, {
       "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.currentStyle.display)),
       label: "Justify",
-      property: properties.stylerFlexJustifyItems
+      property: properties.stylerJustifyItems
     }), XNode.create(DropDownProperty, {
       "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.currentStyle.display)),
       label: "Align",
       property: properties.stylerAlignItems
+    }), XNode.create(DropDownProperty, {
+      "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.currentStyle.display)),
+      label: "Gap",
+      property: properties.stylerGap
+    }), XNode.create(DropDownProperty, {
+      "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.currentStyle.display)),
+      label: "Row Gap",
+      property: properties.stylerRowGap
+    }), XNode.create(DropDownProperty, {
+      "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.currentStyle.display)),
+      label: "Column Gap",
+      property: properties.stylerColumnGap
+    }), XNode.create(DropDownProperty, {
+      "style-display": BindEditor.oneWay(e => /flex/i.test(e.selection.currentStyle.display)),
+      label: "Wrap",
+      property: properties.stylerFlexWrap
+    }), XNode.create("hr", null), XNode.create("label", {
+      "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.parentStyle.display)),
+      text: BindEditor.oneWay(e => /flex/i.test(e.selection.parentStyle.display)) ? "Flex Child" : "Grid Child"
+    }), XNode.create(DropDownProperty, {
+      "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.parentStyle.display)),
+      label: "Align",
+      property: properties.stylerAlignSelf
+    }), XNode.create(DropDownProperty, {
+      "style-display": BindEditor.oneWay(e => /flex|grid/i.test(e.selection.parentStyle.display)),
+      label: "Justify",
+      property: properties.stylerJustifySelf
     }));
   }
   _export("default", LayoutEditor);
@@ -32601,7 +32849,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
 System.register(["tslib", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/AtomBinder"], function (_export, _context) {
   "use strict";
-  var __awaiter, __decorate, __metadata, BindableProperty, AtomControl, XNode, Bind, AtomBinder, SizeEditorControl;
+  var __awaiter, __decorate, __metadata, BindableProperty, AtomControl, XNode, Bind, AtomBinder, SizeEditorControl, BindSizeEditor;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -32620,6 +32868,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/BindableProperty", "@web-at
       AtomBinder = _webAtomsCoreDistCoreAtomBinder.AtomBinder;
     }],
     execute: function () {
+      _export("BindSizeEditor", BindSizeEditor = Bind.forControl());
       _export("default", SizeEditorControl = class SizeEditorControl extends AtomControl {
         constructor() {
           super(...arguments);
@@ -32673,10 +32922,12 @@ System.register(["tslib", "@web-atoms/core/dist/core/BindableProperty", "@web-at
               propertyValue: Bind.sourceTwoWays(pv, x => x.source.value),
               custom: Bind.sourceTwoWays(pv, x => x.source.custom),
               "data-element": "property-editor",
-              "data-layout": "vertical-flex-stretch-items"
+              "data-display": "flex",
+              "data-justify-items": "stretch"
             }, XNode.create("div", {
               "data-layout": "row"
             }, XNode.create("label", {
+              "data-font-size": "small",
               text: Bind.oneWay(() => this.label)
             }), XNode.create("input", {
               type: "checkbox",
@@ -32715,7 +32966,13 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../styler/StylerSet", ".
   function TextPropertyEditor() {
     return XNode.create(ExpanderPropertyEditor, {
       label: "Text"
-    }, XNode.create(SizeEditorControl, {
+    }, XNode.create(DropDownProperty, {
+      label: "Font",
+      property: properties.stylerFontFamily
+    }), XNode.create(DropDownProperty, {
+      label: "Color",
+      property: properties.stylerColor
+    }), XNode.create(SizeEditorControl, {
       label: "Size",
       property: properties.stylerFontSize
     }), XNode.create(DropDownProperty, {
@@ -32724,6 +32981,27 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../styler/StylerSet", ".
     }), XNode.create(DropDownProperty, {
       label: "Style",
       property: properties.stylerFontStyle
+    }), XNode.create(DropDownProperty, {
+      label: "Align",
+      property: properties.stylerTextAlign
+    }), XNode.create(DropDownProperty, {
+      label: "Line Height",
+      property: properties.stylerLineHeight
+    }), XNode.create(DropDownProperty, {
+      label: "Spacing",
+      property: properties.stylerLetterSpacing
+    }), XNode.create(DropDownProperty, {
+      label: "Decoration",
+      property: properties.stylerTextDecoration
+    }), XNode.create(DropDownProperty, {
+      label: "Transform",
+      property: properties.stylerTextTransform
+    }), XNode.create(DropDownProperty, {
+      label: "Direction",
+      property: properties.stylerDirection
+    }), XNode.create(DropDownProperty, {
+      label: "Break",
+      property: properties.stylerWhiteSpace
     }));
   }
   _export("default", TextPropertyEditor);
@@ -32747,1551 +33025,276 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../styler/StylerSet", ".
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/TextPropertyEditor");
-// This file is autogenerated.
-// It's here at this path for backwards compatibility for links to it
-// but the npm package now exports both CJS and ESM.
-// See https://github.com/bgrins/TinyColor/ for instructions.
-  (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tinycolor = factory());
-})(this, (function () { 'use strict';
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
-  }
+System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet", "../controls/SizeEditorControl"], function (_export, _context) {
+  "use strict";
-  // https://github.com/bgrins/TinyColor
-  // Brian Grinstead, MIT License
-  var trimLeft = /^\s+/;
-  var trimRight = /\s+$/;
-  function tinycolor(color, opts) {
-    color = color ? color : "";
-    opts = opts || {};
-    // If input is already a tinycolor, return itself
-    if (color instanceof tinycolor) {
-      return color;
-    }
-    // If we are called as a function, call using new instead
-    if (!(this instanceof tinycolor)) {
-      return new tinycolor(color, opts);
-    }
-    var rgb = inputToRGB(color);
-    this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format;
-    this._gradientType = opts.gradientType;
-    // Don't let the range of [0,255] come back in [0,1].
-    // Potentially lose a little bit of precision here, but will fix issues where
-    // .5 gets interpreted as half of the total, instead of half of 1
-    // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-    if (this._r < 1) this._r = Math.round(this._r);
-    if (this._g < 1) this._g = Math.round(this._g);
-    if (this._b < 1) this._b = Math.round(this._b);
-    this._ok = rgb.ok;
+  var XNode, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, properties;
+  function BorderGroupEditor() {
+    return XNode.create(ExpanderPropertyEditor, {
+      label: "Border"
+    }, XNode.create(DropDownProperty, {
+      label: "Style",
+      property: properties.stylerBorder
+    }), XNode.create(SizeEditorControl, {
+      label: "Radius",
+      property: properties.stylerBorderRadius
+    }), XNode.create(SizeEditorControl, {
+      label: "Color",
+      property: properties.stylerBorderColor
+    }), XNode.create(SizeEditorControl, {
+      label: "Width",
+      property: properties.stylerBorderWidth
+    }));
   }
-  tinycolor.prototype = {
-    isDark: function isDark() {
-      return this.getBrightness() < 128;
-    },
-    isLight: function isLight() {
-      return !this.isDark();
-    },
-    isValid: function isValid() {
-      return this._ok;
-    },
-    getOriginalInput: function getOriginalInput() {
-      return this._originalInput;
-    },
-    getFormat: function getFormat() {
-      return this._format;
-    },
-    getAlpha: function getAlpha() {
-      return this._a;
-    },
-    getBrightness: function getBrightness() {
-      //http://www.w3.org/TR/AERT#color-contrast
-      var rgb = this.toRgb();
-      return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
-    },
-    getLuminance: function getLuminance() {
-      //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-      var rgb = this.toRgb();
-      var RsRGB, GsRGB, BsRGB, R, G, B;
-      RsRGB = rgb.r / 255;
-      GsRGB = rgb.g / 255;
-      BsRGB = rgb.b / 255;
-      if (RsRGB <= 0.03928) R = RsRGB / 12.92;else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-      if (GsRGB <= 0.03928) G = GsRGB / 12.92;else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-      if (BsRGB <= 0.03928) B = BsRGB / 12.92;else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-      return 0.2126 * R + 0.7152 * G + 0.0722 * B;
-    },
-    setAlpha: function setAlpha(value) {
-      this._a = boundAlpha(value);
-      this._roundA = Math.round(100 * this._a) / 100;
-      return this;
-    },
-    toHsv: function toHsv() {
-      var hsv = rgbToHsv(this._r, this._g, this._b);
-      return {
-        h: hsv.h * 360,
-        s: hsv.s,
-        v: hsv.v,
-        a: this._a
-      };
-    },
-    toHsvString: function toHsvString() {
-      var hsv = rgbToHsv(this._r, this._g, this._b);
-      var h = Math.round(hsv.h * 360),
-        s = Math.round(hsv.s * 100),
-        v = Math.round(hsv.v * 100);
-      return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
-    },
-    toHsl: function toHsl() {
-      var hsl = rgbToHsl(this._r, this._g, this._b);
-      return {
-        h: hsl.h * 360,
-        s: hsl.s,
-        l: hsl.l,
-        a: this._a
-      };
-    },
-    toHslString: function toHslString() {
-      var hsl = rgbToHsl(this._r, this._g, this._b);
-      var h = Math.round(hsl.h * 360),
-        s = Math.round(hsl.s * 100),
-        l = Math.round(hsl.l * 100);
-      return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
-    },
-    toHex: function toHex(allow3Char) {
-      return rgbToHex(this._r, this._g, this._b, allow3Char);
-    },
-    toHexString: function toHexString(allow3Char) {
-      return "#" + this.toHex(allow3Char);
-    },
-    toHex8: function toHex8(allow4Char) {
-      return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
-    },
-    toHex8String: function toHex8String(allow4Char) {
-      return "#" + this.toHex8(allow4Char);
-    },
-    toRgb: function toRgb() {
-      return {
-        r: Math.round(this._r),
-        g: Math.round(this._g),
-        b: Math.round(this._b),
-        a: this._a
-      };
-    },
-    toRgbString: function toRgbString() {
-      return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
-    },
-    toPercentageRgb: function toPercentageRgb() {
-      return {
-        r: Math.round(bound01(this._r, 255) * 100) + "%",
-        g: Math.round(bound01(this._g, 255) * 100) + "%",
-        b: Math.round(bound01(this._b, 255) * 100) + "%",
-        a: this._a
-      };
-    },
-    toPercentageRgbString: function toPercentageRgbString() {
-      return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
-    },
-    toName: function toName() {
-      if (this._a === 0) {
-        return "transparent";
-      }
-      if (this._a < 1) {
-        return false;
-      }
-      return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
-    },
-    toFilter: function toFilter(secondColor) {
-      var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
-      var secondHex8String = hex8String;
-      var gradientType = this._gradientType ? "GradientType = 1, " : "";
-      if (secondColor) {
-        var s = tinycolor(secondColor);
-        secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
-      }
-      return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
-    },
-    toString: function toString(format) {
-      var formatSet = !!format;
-      format = format || this._format;
-      var formattedString = false;
-      var hasAlpha = this._a < 1 && this._a >= 0;
-      var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
-      if (needsAlphaFormat) {
-        // Special case for "transparent", all other non-alpha formats
-        // will return rgba when there is transparency.
-        if (format === "name" && this._a === 0) {
-          return this.toName();
-        }
-        return this.toRgbString();
-      }
-      if (format === "rgb") {
-        formattedString = this.toRgbString();
-      }
-      if (format === "prgb") {
-        formattedString = this.toPercentageRgbString();
-      }
-      if (format === "hex" || format === "hex6") {
-        formattedString = this.toHexString();
-      }
-      if (format === "hex3") {
-        formattedString = this.toHexString(true);
-      }
-      if (format === "hex4") {
-        formattedString = this.toHex8String(true);
-      }
-      if (format === "hex8") {
-        formattedString = this.toHex8String();
-      }
-      if (format === "name") {
-        formattedString = this.toName();
-      }
-      if (format === "hsl") {
-        formattedString = this.toHslString();
-      }
-      if (format === "hsv") {
-        formattedString = this.toHsvString();
-      }
-      return formattedString || this.toHexString();
-    },
-    clone: function clone() {
-      return tinycolor(this.toString());
-    },
-    _applyModification: function _applyModification(fn, args) {
-      var color = fn.apply(null, [this].concat([].slice.call(args)));
-      this._r = color._r;
-      this._g = color._g;
-      this._b = color._b;
-      this.setAlpha(color._a);
-      return this;
-    },
-    lighten: function lighten() {
-      return this._applyModification(_lighten, arguments);
-    },
-    brighten: function brighten() {
-      return this._applyModification(_brighten, arguments);
-    },
-    darken: function darken() {
-      return this._applyModification(_darken, arguments);
-    },
-    desaturate: function desaturate() {
-      return this._applyModification(_desaturate, arguments);
-    },
-    saturate: function saturate() {
-      return this._applyModification(_saturate, arguments);
-    },
-    greyscale: function greyscale() {
-      return this._applyModification(_greyscale, arguments);
-    },
-    spin: function spin() {
-      return this._applyModification(_spin, arguments);
-    },
-    _applyCombination: function _applyCombination(fn, args) {
-      return fn.apply(null, [this].concat([].slice.call(args)));
-    },
-    analogous: function analogous() {
-      return this._applyCombination(_analogous, arguments);
-    },
-    complement: function complement() {
-      return this._applyCombination(_complement, arguments);
-    },
-    monochromatic: function monochromatic() {
-      return this._applyCombination(_monochromatic, arguments);
-    },
-    splitcomplement: function splitcomplement() {
-      return this._applyCombination(_splitcomplement, arguments);
-    },
-    // Disabled until https://github.com/bgrins/TinyColor/issues/254
-    // polyad: function (number) {
-    //   return this._applyCombination(polyad, [number]);
-    // },
-    triad: function triad() {
-      return this._applyCombination(polyad, [3]);
-    },
-    tetrad: function tetrad() {
-      return this._applyCombination(polyad, [4]);
+  _export("default", BorderGroupEditor);
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_controlsPropertyEditor) {
+      DropDownProperty = _controlsPropertyEditor.DropDownProperty;
+      ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
+    }, function (_stylerStylerSet) {
+      StylerSet = _stylerStylerSet.StylerSet;
+    }, function (_controlsSizeEditorControl) {
+      SizeEditorControl = _controlsSizeEditorControl.default;
+    }],
+    execute: function () {
+      ({
+        properties
+      } = StylerSet.instance);
     }
   };
+});
+//# sourceMappingURL=BorderGroupEditor.js.map
-  // If input is an object, force 1 into "1.0" to handle ratios properly
-  // String input requires "1.0" as input, so 1 will be treated as 1
-  tinycolor.fromRatio = function (color, opts) {
-    if (_typeof(color) == "object") {
-      var newColor = {};
-      for (var i in color) {
-        if (color.hasOwnProperty(i)) {
-          if (i === "a") {
-            newColor[i] = color[i];
-          } else {
-            newColor[i] = convertToPercentage(color[i]);
-          }
-        }
-      }
-      color = newColor;
-    }
-    return tinycolor(color, opts);
-  };
-  // Given a string or object, convert that input to RGB
-  // Possible string inputs:
-  //
-  //     "red"
-  //     "#f00" or "f00"
-  //     "#ff0000" or "ff0000"
-  //     "#ff000000" or "ff000000"
-  //     "rgb 255 0 0" or "rgb (255, 0, 0)"
-  //     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
-  //     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
-  //     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
-  //     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
-  //     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
-  //     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
-  //
-  function inputToRGB(color) {
-    var rgb = {
-      r: 0,
-      g: 0,
-      b: 0
-    };
-    var a = 1;
-    var s = null;
-    var v = null;
-    var l = null;
-    var ok = false;
-    var format = false;
-    if (typeof color == "string") {
-      color = stringInputToObject(color);
-    }
-    if (_typeof(color) == "object") {
-      if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-        rgb = rgbToRgb(color.r, color.g, color.b);
-        ok = true;
-        format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
-      } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-        s = convertToPercentage(color.s);
-        v = convertToPercentage(color.v);
-        rgb = hsvToRgb(color.h, s, v);
-        ok = true;
-        format = "hsv";
-      } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-        s = convertToPercentage(color.s);
-        l = convertToPercentage(color.l);
-        rgb = hslToRgb(color.h, s, l);
-        ok = true;
-        format = "hsl";
-      }
-      if (color.hasOwnProperty("a")) {
-        a = color.a;
-      }
-    }
-    a = boundAlpha(a);
-    return {
-      ok: ok,
-      format: color.format || format,
-      r: Math.min(255, Math.max(rgb.r, 0)),
-      g: Math.min(255, Math.max(rgb.g, 0)),
-      b: Math.min(255, Math.max(rgb.b, 0)),
-      a: a
-    };
-  }
-  // Conversion Functions
-  // --------------------
-  // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-  // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
-  // `rgbToRgb`
-  // Handle bounds / percentage checking to conform to CSS color spec
-  // <http://www.w3.org/TR/css3-color/>
-  // *Assumes:* r, g, b in [0, 255] or [0, 1]
-  // *Returns:* { r, g, b } in [0, 255]
-  function rgbToRgb(r, g, b) {
-    return {
-      r: bound01(r, 255) * 255,
-      g: bound01(g, 255) * 255,
-      b: bound01(b, 255) * 255
-    };
-  }
-  // `rgbToHsl`
-  // Converts an RGB color value to HSL.
-  // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
-  // *Returns:* { h, s, l } in [0,1]
-  function rgbToHsl(r, g, b) {
-    r = bound01(r, 255);
-    g = bound01(g, 255);
-    b = bound01(b, 255);
-    var max = Math.max(r, g, b),
-      min = Math.min(r, g, b);
-    var h,
-      s,
-      l = (max + min) / 2;
-    if (max == min) {
-      h = s = 0; // achromatic
-    } else {
-      var d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-      h /= 6;
-    }
-    return {
-      h: h,
-      s: s,
-      l: l
-    };
-  }
-  // `hslToRgb`
-  // Converts an HSL color value to RGB.
-  // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
-  // *Returns:* { r, g, b } in the set [0, 255]
-  function hslToRgb(h, s, l) {
-    var r, g, b;
-    h = bound01(h, 360);
-    s = bound01(s, 100);
-    l = bound01(l, 100);
-    function hue2rgb(p, q, t) {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    }
-    if (s === 0) {
-      r = g = b = l; // achromatic
-    } else {
-      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      var p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
-    }
-    return {
-      r: r * 255,
-      g: g * 255,
-      b: b * 255
-    };
-  }
-  // `rgbToHsv`
-  // Converts an RGB color value to HSV
-  // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
-  // *Returns:* { h, s, v } in [0,1]
-  function rgbToHsv(r, g, b) {
-    r = bound01(r, 255);
-    g = bound01(g, 255);
-    b = bound01(b, 255);
-    var max = Math.max(r, g, b),
-      min = Math.min(r, g, b);
-    var h,
-      s,
-      v = max;
-    var d = max - min;
-    s = max === 0 ? 0 : d / max;
-    if (max == min) {
-      h = 0; // achromatic
-    } else {
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-      h /= 6;
-    }
-    return {
-      h: h,
-      s: s,
-      v: v
-    };
-  }
-  // `hsvToRgb`
-  // Converts an HSV color value to RGB.
-  // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
-  // *Returns:* { r, g, b } in the set [0, 255]
-  function hsvToRgb(h, s, v) {
-    h = bound01(h, 360) * 6;
-    s = bound01(s, 100);
-    v = bound01(v, 100);
-    var i = Math.floor(h),
-      f = h - i,
-      p = v * (1 - s),
-      q = v * (1 - f * s),
-      t = v * (1 - (1 - f) * s),
-      mod = i % 6,
-      r = [v, q, p, p, t, v][mod],
-      g = [t, v, v, q, p, p][mod],
-      b = [p, p, t, v, v, q][mod];
-    return {
-      r: r * 255,
-      g: g * 255,
-      b: b * 255
-    };
-  }
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/BorderGroupEditor");
-  // `rgbToHex`
-  // Converts an RGB color to hex
-  // Assumes r, g, and b are contained in the set [0, 255]
-  // Returns a 3 or 6 character hex
-  function rgbToHex(r, g, b, allow3Char) {
-    var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet"], function (_export, _context) {
+  "use strict";
-    // Return a 3 character hex if possible
-    if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
-      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-    }
-    return hex.join("");
+  var XNode, DropDownProperty, ExpanderPropertyEditor, StylerSet, properties;
+  function SizeGroupEditor() {
+    return XNode.create(ExpanderPropertyEditor, {
+      label: "Size"
+    }, XNode.create(DropDownProperty, {
+      label: "Width",
+      property: properties.stylerWidth
+    }), XNode.create(DropDownProperty, {
+      label: "Height",
+      property: properties.stylerHeight
+    }), XNode.create(DropDownProperty, {
+      label: "Min Width",
+      property: properties.stylerMinWidth
+    }), XNode.create(DropDownProperty, {
+      label: "Min Height",
+      property: properties.stylerMinHeight
+    }), XNode.create(DropDownProperty, {
+      label: "Max Width",
+      property: properties.stylerMaxWidth
+    }), XNode.create(DropDownProperty, {
+      label: "Max Height",
+      property: properties.stylerMaxHeight
+    }));
   }
-  // `rgbaToHex`
-  // Converts an RGBA color plus alpha transparency to hex
-  // Assumes r, g, b are contained in the set [0, 255] and
-  // a in [0, 1]. Returns a 4 or 8 character rgba hex
-  function rgbaToHex(r, g, b, a, allow4Char) {
-    var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
-    // Return a 4 character hex if possible
-    if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
-      return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+  _export("default", SizeGroupEditor);
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_controlsPropertyEditor) {
+      DropDownProperty = _controlsPropertyEditor.DropDownProperty;
+      ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
+    }, function (_stylerStylerSet) {
+      StylerSet = _stylerStylerSet.StylerSet;
+    }],
+    execute: function () {
+      ({
+        properties
+      } = StylerSet.instance);
     }
-    return hex.join("");
-  }
-  // `rgbaToArgbHex`
-  // Converts an RGBA color to an ARGB Hex8 string
-  // Rarely used, but required for "toFilter()"
-  function rgbaToArgbHex(r, g, b, a) {
-    var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
-    return hex.join("");
-  }
-  // `equals`
-  // Can be called with any tinycolor input
-  tinycolor.equals = function (color1, color2) {
-    if (!color1 || !color2) return false;
-    return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
-  };
-  tinycolor.random = function () {
-    return tinycolor.fromRatio({
-      r: Math.random(),
-      g: Math.random(),
-      b: Math.random()
-    });
   };
+});
+//# sourceMappingURL=SizeGroupEditor.js.map
-  // Modification Functions
-  // ----------------------
-  // Thanks to less.js for some of the basics here
-  // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
-  function _desaturate(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.s -= amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return tinycolor(hsl);
-  }
-  function _saturate(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.s += amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return tinycolor(hsl);
-  }
-  function _greyscale(color) {
-    return tinycolor(color).desaturate(100);
-  }
-  function _lighten(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.l += amount / 100;
-    hsl.l = clamp01(hsl.l);
-    return tinycolor(hsl);
-  }
-  function _brighten(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var rgb = tinycolor(color).toRgb();
-    rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
-    rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
-    rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
-    return tinycolor(rgb);
-  }
-  function _darken(color, amount) {
-    amount = amount === 0 ? 0 : amount || 10;
-    var hsl = tinycolor(color).toHsl();
-    hsl.l -= amount / 100;
-    hsl.l = clamp01(hsl.l);
-    return tinycolor(hsl);
-  }
-  // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
-  // Values outside of this range will be wrapped into this range.
-  function _spin(color, amount) {
-    var hsl = tinycolor(color).toHsl();
-    var hue = (hsl.h + amount) % 360;
-    hsl.h = hue < 0 ? 360 + hue : hue;
-    return tinycolor(hsl);
-  }
-  // Combination Functions
-  // ---------------------
-  // Thanks to jQuery xColor for some of the ideas behind these
-  // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
-  function _complement(color) {
-    var hsl = tinycolor(color).toHsl();
-    hsl.h = (hsl.h + 180) % 360;
-    return tinycolor(hsl);
-  }
-  function polyad(color, number) {
-    if (isNaN(number) || number <= 0) {
-      throw new Error("Argument to polyad must be a positive number");
-    }
-    var hsl = tinycolor(color).toHsl();
-    var result = [tinycolor(color)];
-    var step = 360 / number;
-    for (var i = 1; i < number; i++) {
-      result.push(tinycolor({
-        h: (hsl.h + i * step) % 360,
-        s: hsl.s,
-        l: hsl.l
-      }));
-    }
-    return result;
-  }
-  function _splitcomplement(color) {
-    var hsl = tinycolor(color).toHsl();
-    var h = hsl.h;
-    return [tinycolor(color), tinycolor({
-      h: (h + 72) % 360,
-      s: hsl.s,
-      l: hsl.l
-    }), tinycolor({
-      h: (h + 216) % 360,
-      s: hsl.s,
-      l: hsl.l
-    })];
-  }
-  function _analogous(color, results, slices) {
-    results = results || 6;
-    slices = slices || 30;
-    var hsl = tinycolor(color).toHsl();
-    var part = 360 / slices;
-    var ret = [tinycolor(color)];
-    for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
-      hsl.h = (hsl.h + part) % 360;
-      ret.push(tinycolor(hsl));
-    }
-    return ret;
-  }
-  function _monochromatic(color, results) {
-    results = results || 6;
-    var hsv = tinycolor(color).toHsv();
-    var h = hsv.h,
-      s = hsv.s,
-      v = hsv.v;
-    var ret = [];
-    var modification = 1 / results;
-    while (results--) {
-      ret.push(tinycolor({
-        h: h,
-        s: s,
-        v: v
-      }));
-      v = (v + modification) % 1;
-    }
-    return ret;
-  }
-  // Utility Functions
-  // ---------------------
-  tinycolor.mix = function (color1, color2, amount) {
-    amount = amount === 0 ? 0 : amount || 50;
-    var rgb1 = tinycolor(color1).toRgb();
-    var rgb2 = tinycolor(color2).toRgb();
-    var p = amount / 100;
-    var rgba = {
-      r: (rgb2.r - rgb1.r) * p + rgb1.r,
-      g: (rgb2.g - rgb1.g) * p + rgb1.g,
-      b: (rgb2.b - rgb1.b) * p + rgb1.b,
-      a: (rgb2.a - rgb1.a) * p + rgb1.a
-    };
-    return tinycolor(rgba);
-  };
-  // Readability Functions
-  // ---------------------
-  // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
-  // `contrast`
-  // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
-  tinycolor.readability = function (color1, color2) {
-    var c1 = tinycolor(color1);
-    var c2 = tinycolor(color2);
-    return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
-  };
-  // `isReadable`
-  // Ensure that foreground and background color combinations meet WCAG2 guidelines.
-  // The third argument is an optional Object.
-  //      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
-  //      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
-  // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
-  // *Example*
-  //    tinycolor.isReadable("#000", "#111") => false
-  //    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
-  tinycolor.isReadable = function (color1, color2, wcag2) {
-    var readability = tinycolor.readability(color1, color2);
-    var wcag2Parms, out;
-    out = false;
-    wcag2Parms = validateWCAG2Parms(wcag2);
-    switch (wcag2Parms.level + wcag2Parms.size) {
-      case "AAsmall":
-      case "AAAlarge":
-        out = readability >= 4.5;
-        break;
-      case "AAlarge":
-        out = readability >= 3;
-        break;
-      case "AAAsmall":
-        out = readability >= 7;
-        break;
-    }
-    return out;
-  };
-  // `mostReadable`
-  // Given a base color and a list of possible foreground or background
-  // colors for that base, returns the most readable color.
-  // Optionally returns Black or White if the most readable color is unreadable.
-  // *Example*
-  //    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
-  //    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
-  //    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
-  //    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
-  tinycolor.mostReadable = function (baseColor, colorList, args) {
-    var bestColor = null;
-    var bestScore = 0;
-    var readability;
-    var includeFallbackColors, level, size;
-    args = args || {};
-    includeFallbackColors = args.includeFallbackColors;
-    level = args.level;
-    size = args.size;
-    for (var i = 0; i < colorList.length; i++) {
-      readability = tinycolor.readability(baseColor, colorList[i]);
-      if (readability > bestScore) {
-        bestScore = readability;
-        bestColor = tinycolor(colorList[i]);
-      }
-    }
-    if (tinycolor.isReadable(baseColor, bestColor, {
-      level: level,
-      size: size
-    }) || !includeFallbackColors) {
-      return bestColor;
-    } else {
-      args.includeFallbackColors = false;
-      return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
-    }
-  };
-  // Big List of Colors
-  // ------------------
-  // <https://www.w3.org/TR/css-color-4/#named-colors>
-  var names = tinycolor.names = {
-    aliceblue: "f0f8ff",
-    antiquewhite: "faebd7",
-    aqua: "0ff",
-    aquamarine: "7fffd4",
-    azure: "f0ffff",
-    beige: "f5f5dc",
-    bisque: "ffe4c4",
-    black: "000",
-    blanchedalmond: "ffebcd",
-    blue: "00f",
-    blueviolet: "8a2be2",
-    brown: "a52a2a",
-    burlywood: "deb887",
-    burntsienna: "ea7e5d",
-    cadetblue: "5f9ea0",
-    chartreuse: "7fff00",
-    chocolate: "d2691e",
-    coral: "ff7f50",
-    cornflowerblue: "6495ed",
-    cornsilk: "fff8dc",
-    crimson: "dc143c",
-    cyan: "0ff",
-    darkblue: "00008b",
-    darkcyan: "008b8b",
-    darkgoldenrod: "b8860b",
-    darkgray: "a9a9a9",
-    darkgreen: "006400",
-    darkgrey: "a9a9a9",
-    darkkhaki: "bdb76b",
-    darkmagenta: "8b008b",
-    darkolivegreen: "556b2f",
-    darkorange: "ff8c00",
-    darkorchid: "9932cc",
-    darkred: "8b0000",
-    darksalmon: "e9967a",
-    darkseagreen: "8fbc8f",
-    darkslateblue: "483d8b",
-    darkslategray: "2f4f4f",
-    darkslategrey: "2f4f4f",
-    darkturquoise: "00ced1",
-    darkviolet: "9400d3",
-    deeppink: "ff1493",
-    deepskyblue: "00bfff",
-    dimgray: "696969",
-    dimgrey: "696969",
-    dodgerblue: "1e90ff",
-    firebrick: "b22222",
-    floralwhite: "fffaf0",
-    forestgreen: "228b22",
-    fuchsia: "f0f",
-    gainsboro: "dcdcdc",
-    ghostwhite: "f8f8ff",
-    gold: "ffd700",
-    goldenrod: "daa520",
-    gray: "808080",
-    green: "008000",
-    greenyellow: "adff2f",
-    grey: "808080",
-    honeydew: "f0fff0",
-    hotpink: "ff69b4",
-    indianred: "cd5c5c",
-    indigo: "4b0082",
-    ivory: "fffff0",
-    khaki: "f0e68c",
-    lavender: "e6e6fa",
-    lavenderblush: "fff0f5",
-    lawngreen: "7cfc00",
-    lemonchiffon: "fffacd",
-    lightblue: "add8e6",
-    lightcoral: "f08080",
-    lightcyan: "e0ffff",
-    lightgoldenrodyellow: "fafad2",
-    lightgray: "d3d3d3",
-    lightgreen: "90ee90",
-    lightgrey: "d3d3d3",
-    lightpink: "ffb6c1",
-    lightsalmon: "ffa07a",
-    lightseagreen: "20b2aa",
-    lightskyblue: "87cefa",
-    lightslategray: "789",
-    lightslategrey: "789",
-    lightsteelblue: "b0c4de",
-    lightyellow: "ffffe0",
-    lime: "0f0",
-    limegreen: "32cd32",
-    linen: "faf0e6",
-    magenta: "f0f",
-    maroon: "800000",
-    mediumaquamarine: "66cdaa",
-    mediumblue: "0000cd",
-    mediumorchid: "ba55d3",
-    mediumpurple: "9370db",
-    mediumseagreen: "3cb371",
-    mediumslateblue: "7b68ee",
-    mediumspringgreen: "00fa9a",
-    mediumturquoise: "48d1cc",
-    mediumvioletred: "c71585",
-    midnightblue: "191970",
-    mintcream: "f5fffa",
-    mistyrose: "ffe4e1",
-    moccasin: "ffe4b5",
-    navajowhite: "ffdead",
-    navy: "000080",
-    oldlace: "fdf5e6",
-    olive: "808000",
-    olivedrab: "6b8e23",
-    orange: "ffa500",
-    orangered: "ff4500",
-    orchid: "da70d6",
-    palegoldenrod: "eee8aa",
-    palegreen: "98fb98",
-    paleturquoise: "afeeee",
-    palevioletred: "db7093",
-    papayawhip: "ffefd5",
-    peachpuff: "ffdab9",
-    peru: "cd853f",
-    pink: "ffc0cb",
-    plum: "dda0dd",
-    powderblue: "b0e0e6",
-    purple: "800080",
-    rebeccapurple: "663399",
-    red: "f00",
-    rosybrown: "bc8f8f",
-    royalblue: "4169e1",
-    saddlebrown: "8b4513",
-    salmon: "fa8072",
-    sandybrown: "f4a460",
-    seagreen: "2e8b57",
-    seashell: "fff5ee",
-    sienna: "a0522d",
-    silver: "c0c0c0",
-    skyblue: "87ceeb",
-    slateblue: "6a5acd",
-    slategray: "708090",
-    slategrey: "708090",
-    snow: "fffafa",
-    springgreen: "00ff7f",
-    steelblue: "4682b4",
-    tan: "d2b48c",
-    teal: "008080",
-    thistle: "d8bfd8",
-    tomato: "ff6347",
-    turquoise: "40e0d0",
-    violet: "ee82ee",
-    wheat: "f5deb3",
-    white: "fff",
-    whitesmoke: "f5f5f5",
-    yellow: "ff0",
-    yellowgreen: "9acd32"
-  };
-  // Make it easy to access colors via `hexNames[hex]`
-  var hexNames = tinycolor.hexNames = flip(names);
-  // Utilities
-  // ---------
-  // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
-  function flip(o) {
-    var flipped = {};
-    for (var i in o) {
-      if (o.hasOwnProperty(i)) {
-        flipped[o[i]] = i;
-      }
-    }
-    return flipped;
-  }
-  // Return a valid alpha value [0,1] with all invalid values being set to 1
-  function boundAlpha(a) {
-    a = parseFloat(a);
-    if (isNaN(a) || a < 0 || a > 1) {
-      a = 1;
-    }
-    return a;
-  }
-  // Take input from [0, n] and return it as [0, 1]
-  function bound01(n, max) {
-    if (isOnePointZero(n)) n = "100%";
-    var processPercent = isPercentage(n);
-    n = Math.min(max, Math.max(0, parseFloat(n)));
-    // Automatically convert percentage into number
-    if (processPercent) {
-      n = parseInt(n * max, 10) / 100;
-    }
-    // Handle floating point rounding errors
-    if (Math.abs(n - max) < 0.000001) {
-      return 1;
-    }
-    // Convert into [0, 1] range if it isn't already
-    return n % max / parseFloat(max);
-  }
-  // Force a number between 0 and 1
-  function clamp01(val) {
-    return Math.min(1, Math.max(0, val));
-  }
-  // Parse a base-16 hex value into a base-10 integer
-  function parseIntFromHex(val) {
-    return parseInt(val, 16);
-  }
-  // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
-  // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
-  function isOnePointZero(n) {
-    return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
-  }
-  // Check to see if string passed in is a percentage
-  function isPercentage(n) {
-    return typeof n === "string" && n.indexOf("%") != -1;
-  }
-  // Force a hex value to have 2 characters
-  function pad2(c) {
-    return c.length == 1 ? "0" + c : "" + c;
-  }
-  // Replace a decimal with it's percentage value
-  function convertToPercentage(n) {
-    if (n <= 1) {
-      n = n * 100 + "%";
-    }
-    return n;
-  }
-  // Converts a decimal to a hex value
-  function convertDecimalToHex(d) {
-    return Math.round(parseFloat(d) * 255).toString(16);
-  }
-  // Converts a hex value to a decimal
-  function convertHexToDecimal(h) {
-    return parseIntFromHex(h) / 255;
-  }
-  var matchers = function () {
-    // <http://www.w3.org/TR/css3-values/#integers>
-    var CSS_INTEGER = "[-\\+]?\\d+%?";
-    // <http://www.w3.org/TR/css3-values/#number-value>
-    var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-    // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-    var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-    // Actual matching.
-    // Parentheses and commas are optional, but not required.
-    // Whitespace can take the place of commas or opening paren
-    var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-    var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-    return {
-      CSS_UNIT: new RegExp(CSS_UNIT),
-      rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
-      rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
-      hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
-      hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
-      hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
-      hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
-      hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-      hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-      hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-      hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
-    };
-  }();
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/SizeGroupEditor");
-  // `isValidCSSUnit`
-  // Take in a single string / number and check to see if it looks like a CSS unit
-  // (see `matchers` above for definition).
-  function isValidCSSUnit(color) {
-    return !!matchers.CSS_UNIT.exec(color);
-  }
-  // `stringInputToObject`
-  // Permissive string parsing.  Take in a number of formats, and output an object
-  // based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
-  function stringInputToObject(color) {
-    color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
-    var named = false;
-    if (names[color]) {
-      color = names[color];
-      named = true;
-    } else if (color == "transparent") {
-      return {
-        r: 0,
-        g: 0,
-        b: 0,
-        a: 0,
-        format: "name"
-      };
-    }
+System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet", "../controls/SizeEditorControl"], function (_export, _context) {
+  "use strict";
-    // Try to match string input using regular expressions.
-    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
-    // Just return an object and let the conversion functions handle that.
-    // This way the result will be the same whether the tinycolor is initialized with string or object.
-    var match;
-    if (match = matchers.rgb.exec(color)) {
-      return {
-        r: match[1],
-        g: match[2],
-        b: match[3]
-      };
-    }
-    if (match = matchers.rgba.exec(color)) {
-      return {
-        r: match[1],
-        g: match[2],
-        b: match[3],
-        a: match[4]
-      };
-    }
-    if (match = matchers.hsl.exec(color)) {
-      return {
-        h: match[1],
-        s: match[2],
-        l: match[3]
-      };
-    }
-    if (match = matchers.hsla.exec(color)) {
-      return {
-        h: match[1],
-        s: match[2],
-        l: match[3],
-        a: match[4]
-      };
-    }
-    if (match = matchers.hsv.exec(color)) {
-      return {
-        h: match[1],
-        s: match[2],
-        v: match[3]
-      };
-    }
-    if (match = matchers.hsva.exec(color)) {
-      return {
-        h: match[1],
-        s: match[2],
-        v: match[3],
-        a: match[4]
-      };
-    }
-    if (match = matchers.hex8.exec(color)) {
-      return {
-        r: parseIntFromHex(match[1]),
-        g: parseIntFromHex(match[2]),
-        b: parseIntFromHex(match[3]),
-        a: convertHexToDecimal(match[4]),
-        format: named ? "name" : "hex8"
-      };
-    }
-    if (match = matchers.hex6.exec(color)) {
-      return {
-        r: parseIntFromHex(match[1]),
-        g: parseIntFromHex(match[2]),
-        b: parseIntFromHex(match[3]),
-        format: named ? "name" : "hex"
-      };
-    }
-    if (match = matchers.hex4.exec(color)) {
-      return {
-        r: parseIntFromHex(match[1] + "" + match[1]),
-        g: parseIntFromHex(match[2] + "" + match[2]),
-        b: parseIntFromHex(match[3] + "" + match[3]),
-        a: convertHexToDecimal(match[4] + "" + match[4]),
-        format: named ? "name" : "hex8"
-      };
-    }
-    if (match = matchers.hex3.exec(color)) {
-      return {
-        r: parseIntFromHex(match[1] + "" + match[1]),
-        g: parseIntFromHex(match[2] + "" + match[2]),
-        b: parseIntFromHex(match[3] + "" + match[3]),
-        format: named ? "name" : "hex"
-      };
-    }
-    return false;
+  var XNode, ExpanderPropertyEditor, StylerSet, SizeEditorControl, properties;
+  function SpaceGroupEditor() {
+    return XNode.create(ExpanderPropertyEditor, {
+      label: "Space"
+    }, XNode.create(SizeEditorControl, {
+      label: "Padding",
+      property: properties.stylerPadding
+    }), XNode.create(SizeEditorControl, {
+      label: "Padding Left",
+      property: properties.stylerPaddingLeft
+    }), XNode.create(SizeEditorControl, {
+      label: "Padding Top",
+      property: properties.stylerPaddingTop
+    }), XNode.create(SizeEditorControl, {
+      label: "Padding Right",
+      property: properties.stylerPaddingRight
+    }), XNode.create(SizeEditorControl, {
+      label: "Padding Bottom",
+      property: properties.stylerPaddingBottom
+    }), XNode.create(SizeEditorControl, {
+      label: "Margin",
+      property: properties.stylerMargin
+    }), XNode.create(SizeEditorControl, {
+      label: "Margin Left",
+      property: properties.stylerMarginLeft
+    }), XNode.create(SizeEditorControl, {
+      label: "Margin Top",
+      property: properties.stylerMarginTop
+    }), XNode.create(SizeEditorControl, {
+      label: "Margin Right",
+      property: properties.stylerMarginRight
+    }), XNode.create(SizeEditorControl, {
+      label: "Margin Bottom",
+      property: properties.stylerMarginBottom
+    }));
   }
-  function validateWCAG2Parms(parms) {
-    // return valid WCAG2 parms for isReadable.
-    // If input parms are invalid, return {"level":"AA", "size":"small"}
-    var level, size;
-    parms = parms || {
-      level: "AA",
-      size: "small"
-    };
-    level = (parms.level || "AA").toUpperCase();
-    size = (parms.size || "small").toLowerCase();
-    if (level !== "AA" && level !== "AAA") {
-      level = "AA";
-    }
-    if (size !== "small" && size !== "large") {
-      size = "small";
+  _export("default", SpaceGroupEditor);
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_controlsPropertyEditor) {
+      ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
+    }, function (_stylerStylerSet) {
+      StylerSet = _stylerStylerSet.StylerSet;
+    }, function (_controlsSizeEditorControl) {
+      SizeEditorControl = _controlsSizeEditorControl.default;
+    }],
+    execute: function () {
+      ({
+        properties
+      } = StylerSet.instance);
     }
-    return {
-      level: level,
-      size: size
-    };
-  }
-  return tinycolor;
-}));
+  };
+});
+//# sourceMappingURL=SpaceGroupEditor.js.map
-    AmdLoader.instance.setup("tinycolor2/tinycolor");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/SpaceGroupEditor");
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/StringHelper", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/core/AtomUI", "tinycolor2/tinycolor", "@web-atoms/core/dist/core/AtomDisposableList"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet", "../controls/SizeEditorControl"], function (_export, _context) {
   "use strict";
-  var __decorate, __metadata, Bind, BindableProperty, StringHelper, XNode, styled, AtomControl, descendentElementIterator, tc1, AtomDisposableList, ColorEditor, tc;
-  _export("default", void 0);
+  var XNode, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, BindSizeEditor, properties;
+  function PositionGroupEditor() {
+    return XNode.create(ExpanderPropertyEditor, {
+      label: "Position"
+    }, XNode.create(DropDownProperty, {
+      label: "Position",
+      property: properties.stylerPosition
+    }), XNode.create(SizeEditorControl, {
+      label: "Left",
+      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
+      property: properties.stylerLeft
+    }), XNode.create(SizeEditorControl, {
+      label: "Top",
+      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
+      property: properties.stylerTop
+    }), XNode.create(SizeEditorControl, {
+      label: "Right",
+      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
+      property: properties.stylerRight
+    }), XNode.create(SizeEditorControl, {
+      label: "Bottom",
+      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
+      property: properties.stylerBottom
+    }));
+  }
+  _export("default", PositionGroupEditor);
   return {
-    setters: [function (_tslib) {
-      __decorate = _tslib.__decorate;
-      __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistCoreBindableProperty) {
-      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
-    }, function (_webAtomsCoreDistCoreStringHelper) {
-      StringHelper = _webAtomsCoreDistCoreStringHelper.StringHelper;
-    }, function (_webAtomsCoreDistCoreXNode) {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_webAtomsCoreDistWebCoreAtomUI) {
-      descendentElementIterator = _webAtomsCoreDistWebCoreAtomUI.descendentElementIterator;
-    }, function (_tinycolor2Tinycolor) {
-      tc1 = _tinycolor2Tinycolor;
-    }, function (_webAtomsCoreDistCoreAtomDisposableList) {
-      AtomDisposableList = _webAtomsCoreDistCoreAtomDisposableList.AtomDisposableList;
+    }, function (_controlsPropertyEditor) {
+      DropDownProperty = _controlsPropertyEditor.DropDownProperty;
+      ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
+    }, function (_stylerStylerSet) {
+      StylerSet = _stylerStylerSet.StylerSet;
+    }, function (_controlsSizeEditorControl) {
+      SizeEditorControl = _controlsSizeEditorControl.default;
+      BindSizeEditor = _controlsSizeEditorControl.BindSizeEditor;
     }],
     execute: function () {
-      tc = tc1;
-      styled.css`
-    display: grid;
-    grid-template-rows: auto auto auto auto auto auto;
-    grid-template-columns: 1fr 30px;
-    gap: 5px;
-    position: relative;
-    & > * {
-        grid-column: 1 / span 2;
-    }
-    &:not([data-show-editor=true]) > :not([data-color-element]) {
-        display: none;
-    }
-    & > input[type=range] {
-        height: 10px;
-        border: 0;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        border-radius: 5px;
-        -webkit-appearance: none;
-        appearance: none;
-        &:focus {
-            outline: none;
-        }
-        &::-moz-range-thumb{
-            outline: none !important;
-            background-color: var(--current-color) !important;
-            -webkit-appearance: none !important;
-            color: var(--current-color) !important;
-            height: 20px !important;
-            width: 20px !important;
-            cursor: pointer !important;
-            border-radius: 20px !important;
-            appearance: none !important;
-        }
-        &::-ms-thumb {
-            outline: none !important;
-            background-color: var(--current-color) !important;
-            -webkit-appearance: none !important;
-            color: var(--current-color) !important;
-            height: 20px !important;
-            width: 20px !important;
-            cursor: pointer !important;
-            border-radius: 20px !important;
-            appearance: none !important;
-        }
-        &::-webkit-slider-thumb {
-            outline: none !important;
-            background-color: var(--current-color) !important;
-            -webkit-appearance: none !important;
-            color: var(--current-color) !important;
-            height: 20px !important;
-            width: 20px !important;
-            cursor: pointer !important;
-            border-radius: 20px !important;
-            appearance: none !important;
-        }
-    }
-    & > [data-element=color-input] {
-        grid-row: 1;
-        grid-column: 1;
-    }
-    & > [data-element=picker] {
-        grid-row: 1;
-        grid-column: 2;
-    }
-    & > [data-element=color-area] {
-        grid-row: 2;
-        width: 100%;
-        min-width: 200px;
-        height: 100px;
-        background-image: linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff, var(--current-color, currentColor) );
-    }
-    & > [data-element=color-marker] {
-        grid-row: 2;
-        border-radius: 5px;
-        position: absolute;
-        height: 10px;
-        width: 10px;
-        transform: translate3d(-5px, -5px,0);
-        box-shadow: 0 0 1px 2px white;
-        border: solid 2px gray;
-        pointer-events: none;
-    }
-    & > [data-element=hue-slider] {
-        grid-row: 3;
-        color: var(--current-color);
-        background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
-    }
-    & > [data-element=alpha-slider-bg] {
-        grid-row: 4;
-        appearance: none;
-        border-radius: 5px;
-        margin: 5px;
-        height: 10px;
-        background-position: 0 0, 4px 4px;
-        background-size: 8px 8px;
-        background-image: repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);
-    }
-    & > [data-element=alpha-slider-span] {
-        grid-row: 4;
-        border-radius: 5px;
-        margin: 5px;
-        height: 10px;
-        background-image: linear-gradient(to right, var(--alpha-color), var(--current-color, currentColor) );
-    }
-    & > [data-element=alpha-slider] {
-        grid-row: 4;
-        color: var(--current-color);
-        background-color: transparent;
-        z-index: 4;
-    }
-    & > [data-element=picker] {
-        grid-row: 1;
-        grid-column: 2;
-        width: 20px;
-        height: 20px;
-        border-radius: 20px;
-        align-self: center;
-        justify-self: center;
-    }
-    `.installGlobal("[data-color-editor=color-editor]");
-      _export("default", ColorEditor = class ColorEditor extends AtomControl {
-        constructor() {
-          super(...arguments);
-          this.alpha = 100;
-          this.isOpen = false;
-          this.lastX = 0;
-          this.lastY = 0;
-          this.hue = 360;
-        }
-        onPropertyChanged(name) {
-          if (name === "color") {
-            this.parseColor();
-          }
-        }
-        preCreate() {
-          this.color = "";
-          this.isColorChanging = false;
-          this.element.setAttribute("data-color-editor", "color-editor");
-          this.render(XNode.create("div", {
-            "data-show-editor": Bind.oneWay(() => this.isOpen)
-          }, XNode.create("input", {
-            "data-color-element": "true",
-            "event-click": () => this.isOpen = !this.isOpen,
-            "data-element": "color-input",
-            type: "text",
-            value: Bind.twoWaysImmediate(() => this.color)
-          }), XNode.create("div", {
-            "data-element": "picker",
-            "event-click": () => this.isOpen = !this.isOpen
-          }), XNode.create("div", {
-            "data-element": "color-area",
-            "event-pointerdown": e => this.colorAreaPointerDown(e),
-            "event-click": e => this.updateColorPosition(e)
-          }), XNode.create("div", {
-            "data-element": "color-marker"
-          }), XNode.create("input", {
-            "data-element": "hue-slider",
-            class: "color-slider-range",
-            min: "0",
-            max: "360",
-            step: "1",
-            "event-input": () => this.updateHue(),
-            type: "range",
-            value: Bind.oneWay(() => this.hue)
-          }), XNode.create("div", {
-            "data-element": "alpha-slider-bg"
-          }), XNode.create("div", {
-            "data-element": "alpha-slider-span"
-          }), XNode.create("input", {
-            "data-element": "alpha-slider",
-            class: "color-slider-range",
-            min: "0",
-            max: "100",
-            step: "1",
-            "event-input": () => this.updateAlpha(),
-            type: "range",
-            value: Bind.oneWay(() => this.alpha)
-          })));
-          for (const e of descendentElementIterator(this.element)) {
-            const type = e.getAttribute("data-element");
-            if (type) {
-              this[StringHelper.fromHyphenToCamel(type)] = e;
-            }
-          }
-        }
-        colorAreaPointerDown(e) {
-          const list = new AtomDisposableList();
-          const target = e.currentTarget;
-          target.setPointerCapture(e.pointerId);
-          list.add(() => target.releasePointerCapture(e.pointerId));
-          list.add(this.bindEvent(target, "pointermove", ce => {
-            this.updateColorPosition(ce);
-          }));
-          list.add(this.bindEvent(target, "pointerup", ce => {
-            this.updateColorPosition(ce);
-            list.dispose();
-          }));
-        }
-        updateColorPosition(e) {
-          let x = e.offsetX;
-          let y = e.offsetY;
-          const {
-            colorArea,
-            colorMarker
-          } = this;
-          x = x < 0 ? 0 : x > colorArea.offsetWidth ? colorArea.offsetWidth : x;
-          y = y < 0 ? 0 : y > colorArea.offsetHeight ? colorArea.offsetHeight : y;
-          colorMarker.style.left = `${x}px`;
-          colorMarker.style.top = `${y}px`;
-          this.lastX = x;
-          this.lastY = y;
-          this.updateColor();
-        }
-        updateColor() {
-          const {
-            hueSlider,
-            colorArea,
-            alphaSlider,
-            lastX: x,
-            lastY: y
-          } = this;
-          const hsva = {
-            h: hueSlider.value * 1,
-            s: x / colorArea.offsetWidth * 100,
-            v: 100 - y / colorArea.offsetHeight * 100,
-            a: alphaSlider.value / 100
-          };
-          const rgba = tc(hsva).toHex8String();
-          this.isColorChanging = true;
-          this.color = rgba;
-          this.isColorChanging = false;
-          this.picker.style.backgroundColor = rgba;
-        }
-        updateHue() {
-          const hue = this.hueSlider.value * 1;
-          this.hue = hue;
-          this.element.style.setProperty("--current-color", `hsla(${hue}, 100%, 50%, 100%)`);
-          this.updateColor();
-          this.updateAlpha();
-        }
-        updateAlpha() {
-          const alpha = this.alphaSlider.value * 1;
-          this.alpha = alpha;
-          const hue = this.hue;
-          this.element.style.setProperty("--alpha-color", `hsla(${hue}, 100%, 50%, 0)`);
-          this.updateColor();
-        }
-        parseColor() {
-          if (this.isColorChanging) {
-            return;
-          }
-          const color = tc(this.color);
-          const a = color.getAlpha();
-          this.alpha = a * 100;
-          color.setAlpha(0);
-          const hsl = color.toHsl();
-          this.hue = hsl.h;
-          if (this.hueSlider) {
-            this.hueSlider.value = this.hue + "";
-            this.alphaSlider.value = this.alpha + "";
-            this.updateColor();
-          }
-          this.element.style.setProperty("--current-color", `hsla(${hsl.h}, 100%, 50%, 100%)`);
-          this.element.style.setProperty("--alpha-color", `hsla(${hsl.h}, 100%, 50%, 0)`);
-          this.isColorChanging = true;
-          this.color = color.toHex8String();
-          this.isColorChanging = false;
-        }
-      });
-      __decorate([BindableProperty, __metadata("design:type", String)], ColorEditor.prototype, "color", void 0);
-      __decorate([BindableProperty, __metadata("design:type", Number)], ColorEditor.prototype, "alpha", void 0);
-      __decorate([BindableProperty, __metadata("design:type", Boolean)], ColorEditor.prototype, "isOpen", void 0);
+      ({
+        properties
+      } = StylerSet.instance);
     }
   };
 });
-//# sourceMappingURL=ColorEditor.js.map
+//# sourceMappingURL=PositionGroupEditor.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/controls/ColorEditor");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/PositionGroupEditor");
-System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../controls/ColorEditor"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet", "../controls/SizeEditorControl"], function (_export, _context) {
   "use strict";
-  var XNode, ExpanderPropertyEditor, ColorEditor;
-  function ColorGroupEditor() {
+  var XNode, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, properties;
+  function BackgroundGroupEditor() {
     return XNode.create(ExpanderPropertyEditor, {
-      label: "Colors"
-    }, XNode.create(ColorEditor, null));
+      label: "Background"
+    }, XNode.create(DropDownProperty, {
+      label: "Type",
+      property: properties.stylerBackground
+    }), XNode.create(DropDownProperty, {
+      label: "Color",
+      property: properties.stylerBackgroundColor
+    }), XNode.create(DropDownProperty, {
+      label: "Image",
+      property: properties.stylerBackgroundImage
+    }), XNode.create(DropDownProperty, {
+      label: "Position",
+      property: properties.stylerBackgroundPosition
+    }), XNode.create(SizeEditorControl, {
+      label: "Position-X",
+      property: properties.stylerBackgroundPositionX
+    }), XNode.create(SizeEditorControl, {
+      label: "Position-Y",
+      property: properties.stylerBackgroundPositionY
+    }), XNode.create(DropDownProperty, {
+      label: "Size",
+      property: properties.stylerBackgroundSize
+    }), XNode.create(DropDownProperty, {
+      label: "Repeat",
+      property: properties.stylerBackgroundRepeat
+    }), XNode.create(DropDownProperty, {
+      label: "Attachment",
+      property: properties.stylerBackgroundAttachment
+    }));
   }
-  _export("default", ColorGroupEditor);
+  _export("default", BackgroundGroupEditor);
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_controlsPropertyEditor) {
+      DropDownProperty = _controlsPropertyEditor.DropDownProperty;
       ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
-    }, function (_controlsColorEditor) {
-      ColorEditor = _controlsColorEditor.default;
+    }, function (_stylerStylerSet) {
+      StylerSet = _stylerStylerSet.StylerSet;
+    }, function (_controlsSizeEditorControl) {
+      SizeEditorControl = _controlsSizeEditorControl.default;
     }],
-    execute: function () {}
+    execute: function () {
+      properties = StylerSet.instance.properties;
+    }
   };
 });
-//# sourceMappingURL=ColorGroupEditor.js.map
+//# sourceMappingURL=BackgroundGroupEditor.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/ColorGroupEditor");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/BackgroundGroupEditor");
-System.register(["@web-atoms/core/dist/core/XNode", "./groups/LayoutEditor", "./groups/TextPropertyEditor", "./groups/ColorGroupEditor"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./groups/LayoutEditor", "./groups/TextPropertyEditor", "./groups/BorderGroupEditor", "./groups/SizeGroupEditor", "./groups/SpaceGroupEditor", "./groups/PositionGroupEditor", "./groups/BackgroundGroupEditor"], function (_export, _context) {
   "use strict";
-  var XNode, LayoutEditor, TextPropertyEditor, ColorGroupEditor;
+  var XNode, LayoutEditor, TextPropertyEditor, BorderGroupEditor, SizeGroupEditor, SpaceGroupEditor, PositionGroupEditor, BackgroundGroupEditor;
   function Properties() {
     return XNode.create("div", {
       "data-layout": "vertical-flex-stretch-items"
-    }, XNode.create(LayoutEditor, null), XNode.create(ColorGroupEditor, null), XNode.create(TextPropertyEditor, null));
+    }, XNode.create(LayoutEditor, null), XNode.create(SizeGroupEditor, null), XNode.create(BorderGroupEditor, null), XNode.create(SpaceGroupEditor, null), XNode.create(PositionGroupEditor, null), XNode.create(BackgroundGroupEditor, null), XNode.create(TextPropertyEditor, null));
   }
   _export("default", Properties);
   return {
@@ -34301,8 +33304,16 @@ System.register(["@web-atoms/core/dist/core/XNode", "./groups/LayoutEditor", "./
       LayoutEditor = _groupsLayoutEditor.default;
     }, function (_groupsTextPropertyEditor) {
       TextPropertyEditor = _groupsTextPropertyEditor.default;
-    }, function (_groupsColorGroupEditor) {
-      ColorGroupEditor = _groupsColorGroupEditor.default;
+    }, function (_groupsBorderGroupEditor) {
+      BorderGroupEditor = _groupsBorderGroupEditor.default;
+    }, function (_groupsSizeGroupEditor) {
+      SizeGroupEditor = _groupsSizeGroupEditor.default;
+    }, function (_groupsSpaceGroupEditor) {
+      SpaceGroupEditor = _groupsSpaceGroupEditor.default;
+    }, function (_groupsPositionGroupEditor) {
+      PositionGroupEditor = _groupsPositionGroupEditor.default;
+    }, function (_groupsBackgroundGroupEditor) {
+      BackgroundGroupEditor = _groupsBackgroundGroupEditor.default;
     }],
     execute: function () {}
   };
@@ -34325,6 +33336,11 @@ System.register(["@web-atoms/core/dist/core/AtomBinder"], function (_export, _co
         get element() {
           return this.e;
         }
+        get parentStyle() {
+          var _a, _b, _c, _d;
+          const pe = (_a = this.e) === null || _a === void 0 ? void 0 : _a.parentElement;
+          return (_b = this.cachedParentStyle) !== null && _b !== void 0 ? _b : this.cachedParentStyle = pe && this.editor.htmlDocument ? (_d = (_c = this.editor.htmlDocument) === null || _c === void 0 ? void 0 : _c.defaultView) === null || _d === void 0 ? void 0 : _d.getComputedStyle(pe) : {};
+        }
         get currentStyle() {
           var _a, _b, _c;
           return (_a = this.cachedStyle) !== null && _a !== void 0 ? _a : this.cachedStyle = this.e && this.editor.htmlDocument ? (_c = (_b = this.editor.htmlDocument) === null || _b === void 0 ? void 0 : _b.defaultView) === null || _c === void 0 ? void 0 : _c.getComputedStyle(this.e) : {};
@@ -34337,7 +33353,9 @@ System.register(["@web-atoms/core/dist/core/AtomBinder"], function (_export, _co
           this.mo = new MutationObserver(() => {
             AtomBinder.refreshValue(this, "element");
             this.cachedStyle = null;
+            this.cachedParentStyle = null;
             AtomBinder.refreshValue(this, "currentStyle");
+            AtomBinder.refreshValue(this, "parentStyle");
             for (const iterator of this.styles.values()) {
               AtomBinder.refreshValue(iterator, "value");
               AtomBinder.refreshValue(iterator, "custom");
@@ -34366,6 +33384,11 @@ System.register(["@web-atoms/core/dist/core/AtomBinder"], function (_export, _co
                 }
                 owner.editor.commit();
                 AtomBinder.refreshValue(this, "value");
+                setTimeout(() => {
+                  AtomBinder.refreshValue(this, "custom");
+                  AtomBinder.refreshValue(owner, "currentStyle");
+                  AtomBinder.refreshValue(owner, "parentStyle");
+                }, 1);
               },
               get custom() {
                 var _a, _b, _c;
@@ -34395,7 +33418,9 @@ System.register(["@web-atoms/core/dist/core/AtomBinder"], function (_export, _co
             this.e = e;
             AtomBinder.refreshValue(this, "element");
             this.cachedStyle = null;
+            this.cachedParentStyle = null;
             AtomBinder.refreshValue(this, "currentStyle");
+            AtomBinder.refreshValue(this, "parentStyle");
             this.mo.observe(e, {
               attributes: true
             });
@@ -34784,7 +33809,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               folder: this.folder,
               accept: "image/*"
             });
-            const src = `/api/site/asset/jpg(${size})/${this.folder.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}.${size}.jpg`;
+            const src = `/api/site/asset/webp(${size})/${this.folder.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}.${size}.webp`;
             if (this.selection.isImage) {
               this.selection.element.setAttribute("src", src);
               this.selection.element.onload = () => this.selection.update();
@@ -35594,9 +34619,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
       _export("default", WebSiteFolderEditor = class WebSiteFolderEditor extends PopupWindowPage {
         init() {
           return __awaiter(this, void 0, void 0, function* () {
+            this.title = "Create Website Folder";
             this.model = WebSiteFolder.create({
               folder: AppFile.create({
-                name: "Web Site",
+                name: "",
                 isFolder: true,
                 contentType: "application/site"
               }),
@@ -35605,8 +34631,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
             this.renderer = XNode.create("div", null, XNode.create(Form, null, XNode.create(FormField, {
               label: "Name"
             }, XNode.create("input", {
+              autofocus: true,
               value: Bind.twoWaysImmediate(() => this.model.folder.name)
-            })), XNode.create("div", {
+            })), XNode.create("div", null, "We recommend using the host name as folder name, e.g. akashkava.com"), XNode.create("div", {
               "data-layout": "command-row"
             }, XNode.create("button", {
               "data-submit-event": "save-web-site"