npm - @social-mail/social-mail-client - Versions diffs - 1.2.121 → 1.2.122 - Mend

@social-mail/social-mail-client 1.2.121 → 1.2.122

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 (198) hide show

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

@@ -1976,7 +1976,7 @@ const UMD = new UMDClass();
         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"],
-            ["@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/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/Hacks","@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","@web-atoms/web-controls/dist/DataAttributes","@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","@social-mail/social-mail-client/dist/services/files/LocalFileService","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/common/FileUploader","@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/common/events/CommonEvents","@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/services/email/EmailContentDownloader","@social-mail/social-mail-client/dist/web/page/mails/service/EngagementService","@social-mail/social-mail-client/dist/common/cache/CacheTTL","@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","@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/web/page/templates/social/SocialTemplate","@social-mail/social-mail-client/dist/services/Emoji","@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/common/controls/file-preview/FilePreview","@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/web/page/files/preview/image/PreviewImage","@web-atoms/web-controls/dist/basic/PinchZoomView","@web-atoms/web-controls/dist/basic/styles/pinch-zoom-view-style","@social-mail/social-mail-client/dist/web/page/files/preview/document/PreviewDocument","@social-mail/social-mail-client/dist/web/page/files/preview/media/PreviewMedia","@web-atoms/web-controls/dist/player/AtomVideoPlayer","@social-mail/social-mail-client/dist/services/FileTypes","@social-mail/social-mail-client/content/icons/audio.svg","@social-mail/social-mail-client/dist/web/page/mails/mini-compose/MiniComposeBox","@social-mail/social-mail-client/dist/common/controls/audio/AudioRecorder","@web-atoms/web-controls/dist/mobile-app/BottomPopup","@web-atoms/web-controls/dist/animations/Animations","@social-mail/social-mail-client/dist/common/controls/audio/WebRTCService","@social-mail/social-mail-client/dist/common/controls/buttons/RoundButton","@web-atoms/web-controls/dist/html-editor/AtomHtmlEditor","@web-atoms/web-controls/dist/html-editor/commands/AttachFile","@social-mail/social-mail-client/dist/web/page/mails/mini-compose/Insert","@social-mail/social-mail-client/dist/code-editor/CodeSnippetPage","@social-mail/social-mail-client/dist/code-editor/MonacoService","@social-mail/social-mail-client/dist/web/page/mails/mini-compose/Attach","@social-mail/social-mail-client/dist/common/controls/emoji-picker/EmojiPicker","@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/dist/web/page/mails/engagements/EngagementDetails","@web-atoms/web-controls/dist/basic/ToggleButtonBar","@web-atoms/web-controls/dist/basic/styles/toggle-button-bar-style","@social-mail/social-mail-client/dist/web/page/mails/ChooseMailboxPage","@social-mail/social-mail-client/dist/common/pages/folders/ChooseTemplatePage","@web-atoms/web-controls/dist/basic/Resizable","@social-mail/social-mail-client/dist/web/page/mails/contact/AddMiniContactPage","@social-mail/social-mail-client/dist/web/page/channels/detail/ChannelDetailPage","@social-mail/social-mail-client/dist/web/page/channels/services/ChannelService","@social-mail/social-mail-client/dist/web/page/channels/subscribers/ChannelSubscribersPage","@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/services/files/MimeTypeService","@social-mail/social-mail-client/dist/common/controls/tree/FileTreeView","@social-mail/social-mail-client/dist/site-editor/editor/WebSitePageEditor","@social-mail/social-mail-client/dist/site-editor/editor/HtmlPageEditor","@social-mail/social-mail-client/dist/site-editor/drag-drop/DragDropHelper","@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/blocks/Block","@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/layouts/display","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/flex/flex","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/items-position/itemsPosition","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/layout","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutTextBox","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutWrapList","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutImageBox","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutRightImageBox","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutColumn2Box","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutColumn","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutRow","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutBlock","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutNavBar","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutFloatingNavBar","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutColumn3Box","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutImageCard","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutCard","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutComponent","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutMain","@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/styler/properties/color-sets/stylerColorSets","@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elements","@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elementImageLink","@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elementLinkButton","@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elementLinkIconButton","@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/properties/groups/AttributeEditor","@social-mail/social-mail-client/dist/site-editor/editor/SelectedElement","@social-mail/social-mail-client/dist/site-editor/blocks/ImageBox","@social-mail/social-mail-client/dist/site-editor/blocks/defaultImage","@social-mail/social-mail-client/dist/site-editor/blocks/RowBox","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/row.png","@social-mail/social-mail-client/dist/site-editor/blocks/ColumnBox","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column.png","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-2.png","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-3.png","@social-mail/social-mail-client/dist/site-editor/blocks/VerticalImageBox","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/vertical-image-box.png","@social-mail/social-mail-client/dist/site-editor/blocks/Image","@social-mail/social-mail-client/dist/site-editor/blocks/ImageCard","@social-mail/social-mail-client/dist/site-editor/blocks/TextBox","@social-mail/social-mail-client/dist/site-editor/blocks/Card","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/card.png","@social-mail/social-mail-client/dist/site-editor/blocks/List","@social-mail/social-mail-client/dist/site-editor/blocks/Components","@social-mail/social-mail-client/dist/site-editor/blocks/Buttons","@social-mail/social-mail-client/dist/web/page/files/media/ChooseMediaPage","@social-mail/social-mail-client/dist/code-editor/CodeEditorPage","@social-mail/social-mail-client/dist/common/pages/websites/history/WebSiteHistory","@social-mail/social-mail-client/dist/common/pages/websites/view/ViewWebSitePage","@social-mail/social-mail-client/dist/common/pages/websites/blogs/WebSiteBlogsPage","@social-mail/social-mail-client/dist/common/pages/websites/blogs/LookupChannelPage","@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/common/pages/mailboxes/external-mailboxes/AddExternalMailboxPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/services/ExternalMailboxService","@social-mail/social-mail-client/dist/admin/pages/relays/edit/EditRelayPage","@social-mail/social-mail-client/dist/admin/pages/repair/RepairPage","@social-mail/social-mail-client/dist/common/pages/user/login/LoginPage","@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"]);
+            ["@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/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/Hacks","@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","@web-atoms/web-controls/dist/DataAttributes","@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","@social-mail/social-mail-client/dist/services/files/LocalFileService","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/common/FileUploader","@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/common/events/CommonEvents","@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/services/email/EmailContentDownloader","@social-mail/social-mail-client/dist/web/page/mails/service/EngagementService","@social-mail/social-mail-client/dist/common/cache/CacheTTL","@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","@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/web/page/templates/social/SocialTemplate","@social-mail/social-mail-client/dist/services/Emoji","@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/common/controls/file-preview/FilePreview","@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/web/page/files/preview/image/PreviewImage","@web-atoms/web-controls/dist/basic/PinchZoomView","@web-atoms/web-controls/dist/basic/styles/pinch-zoom-view-style","@social-mail/social-mail-client/dist/web/page/files/preview/document/PreviewDocument","@social-mail/social-mail-client/dist/web/page/files/preview/media/PreviewMedia","@web-atoms/web-controls/dist/player/AtomVideoPlayer","@social-mail/social-mail-client/dist/services/FileTypes","@social-mail/social-mail-client/content/icons/audio.svg","@social-mail/social-mail-client/dist/web/page/mails/mini-compose/MiniComposeBox","@social-mail/social-mail-client/dist/common/controls/audio/AudioRecorder","@web-atoms/web-controls/dist/mobile-app/BottomPopup","@web-atoms/web-controls/dist/animations/Animations","@social-mail/social-mail-client/dist/common/controls/audio/WebRTCService","@social-mail/social-mail-client/dist/common/controls/buttons/RoundButton","@web-atoms/web-controls/dist/html-editor/AtomHtmlEditor","@web-atoms/web-controls/dist/html-editor/commands/AttachFile","@social-mail/social-mail-client/dist/web/page/mails/mini-compose/Insert","@social-mail/social-mail-client/dist/code-editor/CodeSnippetPage","@social-mail/social-mail-client/dist/code-editor/MonacoService","@social-mail/social-mail-client/dist/web/page/mails/mini-compose/Attach","@social-mail/social-mail-client/dist/common/controls/emoji-picker/EmojiPicker","@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/dist/web/page/mails/engagements/EngagementDetails","@web-atoms/web-controls/dist/basic/ToggleButtonBar","@web-atoms/web-controls/dist/basic/styles/toggle-button-bar-style","@social-mail/social-mail-client/dist/web/page/mails/ChooseMailboxPage","@social-mail/social-mail-client/dist/common/pages/folders/ChooseTemplatePage","@web-atoms/web-controls/dist/basic/Resizable","@social-mail/social-mail-client/dist/web/page/mails/contact/AddMiniContactPage","@social-mail/social-mail-client/dist/web/page/channels/detail/ChannelDetailPage","@social-mail/social-mail-client/dist/web/page/channels/services/ChannelService","@social-mail/social-mail-client/dist/web/page/channels/subscribers/ChannelSubscribersPage","@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/services/files/MimeTypeService","@social-mail/social-mail-client/dist/common/controls/tree/FileTreeView","@social-mail/social-mail-client/dist/site-editor/editor/WebSitePageEditor","@social-mail/social-mail-client/dist/site-editor/editor/HtmlPageEditor","@social-mail/social-mail-client/dist/site-editor/drag-drop/DragDropHelper","@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/blocks/Block","@social-mail/social-mail-client/dist/site-editor/styler/StylerSets","@social-mail/social-mail-client/dist/site-editor/styler/Styler","@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/properties/stylerBorder","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/display","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/flex/flex","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/items-position/itemsPosition","@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/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/styler/properties/color-sets/stylerColorSets","@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/properties/groups/AttributeEditor","@social-mail/social-mail-client/dist/site-editor/editor/SelectedElement","@social-mail/social-mail-client/dist/site-editor/blocks/ImageBox","@social-mail/social-mail-client/dist/site-editor/blocks/defaultImage","@social-mail/social-mail-client/dist/site-editor/blocks/RowBox","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/row.png","@social-mail/social-mail-client/dist/site-editor/blocks/ColumnBox","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column.png","@social-mail/social-mail-client/dist/site-editor/blocks/VerticalImageBox","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/vertical-image-box.png","@social-mail/social-mail-client/dist/site-editor/blocks/Image","@social-mail/social-mail-client/dist/site-editor/blocks/ImageCard","@social-mail/social-mail-client/dist/site-editor/blocks/TextBox","@social-mail/social-mail-client/dist/site-editor/blocks/Card","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/card.png","@social-mail/social-mail-client/dist/site-editor/blocks/List","@social-mail/social-mail-client/dist/site-editor/blocks/Components","@social-mail/social-mail-client/dist/site-editor/blocks/Buttons","@social-mail/social-mail-client/dist/site-editor/blocks/Columns2","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-2.png","@social-mail/social-mail-client/dist/site-editor/blocks/Columns3","@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-3.png","@social-mail/social-mail-client/dist/site-editor/blocks/RightImageBox","@social-mail/social-mail-client/dist/web/page/files/media/ChooseMediaPage","@social-mail/social-mail-client/dist/code-editor/CodeEditorPage","@social-mail/social-mail-client/dist/common/pages/websites/history/WebSiteHistory","@social-mail/social-mail-client/dist/common/pages/websites/view/ViewWebSitePage","@social-mail/social-mail-client/dist/common/pages/websites/blogs/WebSiteBlogsPage","@social-mail/social-mail-client/dist/common/pages/websites/blogs/LookupChannelPage","@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/common/pages/mailboxes/external-mailboxes/AddExternalMailboxPage","@social-mail/social-mail-client/dist/common/pages/mailboxes/services/ExternalMailboxService","@social-mail/social-mail-client/dist/admin/pages/relays/edit/EditRelayPage","@social-mail/social-mail-client/dist/admin/pages/repair/RepairPage","@social-mail/social-mail-client/dist/common/pages/user/login/LoginPage","@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"]);
 System.register([], function (_export, _context) {
   "use strict";
@@ -39035,286 +39035,31 @@ System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XN
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/toolbars/UndoRedoToolbar");
-System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
-  "use strict";
-  var XNode, AtomControl, styled;
-  function Block({
-    className,
-    title,
-    text,
-    rotate,
-    src,
-    factory
-  }) {
-    return () => {
-      const onClick = e => {
-        const editor = AtomControl.from(e.target);
-        const element = editor.buildXNode(factory());
-        editor.insertElement(element, void 0, true);
-      };
-      const onDragStart = e => {
-        const editor = AtomControl.from(e.target);
-        const ne = editor.buildXNode(factory());
-        e.dataTransfer.setDragImage(ne, 0, 0);
-        e.dataTransfer.setData("text/html", ne.outerHTML);
-      };
-      if (src) {
-        return XNode.create("img", {
-          "data-html-editor-element": "block",
-          class: className,
-          title: title,
-          src: src,
-          draggable: true,
-          text: text,
-          "event-click": onClick,
-          "event-dragstart": onDragStart
-        });
-      }
-      return XNode.create("i", {
-        "data-html-editor-element": "block",
-        class: className,
-        title: title,
-        draggable: true,
-        text: text,
-        "style-rotate": rotate ? "90deg" : void 0,
-        "event-click": onClick,
-        "event-dragstart": onDragStart
-      });
-    };
-  }
-  _export("Block", Block);
-  return {
-    setters: [function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
-    execute: function () {
-      styled.css`
-        padding: 5px;
-        cursor: pointer;
-        &:hover {
-            background-color: #00800080;
-        }
-    `.installGlobal("[data-html-editor-element=block]");
-    }
-  };
-});
-//# sourceMappingURL=Block.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Block");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_export, _context) {
-  "use strict";
-  var XNode, Block, WrapGrid;
-  return {
-    setters: [function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_Block) {
-      Block = _Block.Block;
-    }],
-    execute: function () {
-      _export("WrapGrid", WrapGrid = Block({
-        className: "fa-duotone fa-grid-horizontal fa-rotate-90",
-        title: "Wrap Grid",
-        factory: () => XNode.create("div", {
-          "styler-layout": "wrap-list"
-        })
-      }));
-    }
-  };
-});
-//# sourceMappingURL=WrapGrid.js.map
-    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/style/styled"], function (_export, _context) {
+System.register([], function (_export, _context) {
   "use strict";
-  var __rest, XNode, AtomControl, Expander, Select, Bind, styled, BindEditor, BindStyleValue, BindStyleCustom;
-  function PropertyEditor(_a, ...nodes) {
-    var _b, _c;
-    var _d;
-    var {
-        label = void 0,
-        custom = void 0
-      } = _a,
-      a = __rest(_a, ["label", "custom"]);
-    if (!label && nodes.length === 1) {
-      return nodes[0];
-    }
-    for (const iterator of nodes) {
-      (_c = (_d = (_b = iterator.attributes) !== null && _b !== void 0 ? _b : iterator.attributes = {})["data-element"]) !== null && _c !== void 0 ? _c : _d["data-element"] = "editor";
-    }
-    return XNode.create("div", Object.assign({
-      "data-element": "property-editor"
-    }, a), label && XNode.create("label", {
-      "data-font-size": "small"
-    }, label), ...nodes, custom);
-  }
-  function ExpanderPropertyEditor(_a, ...nodes) {
-    var {
-        isExpanded = false,
-        label
-      } = _a,
-      a = __rest(_a, ["isExpanded", "label"]);
-    const child = nodes.length > 1 ? XNode.create("div", {
-      "data-layout": "vertical-flex-stretch-items"
-    }, ...nodes) : nodes[0];
-    return XNode.create(Expander, Object.assign({
-      "data-element": "expander-property-editor",
-      isExpanded: isExpanded
-    }, a), label && XNode.create("label", null, label), child);
-  }
-  function DropDownProperty(_a) {
-    var {
-        label,
-        property
-      } = _a,
-      a = __rest(_a, ["label", "property"]);
-    return XNode.create(PropertyEditor, Object.assign({
-      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 => pair.toPair())]
-    })));
-  }
-  function NumberProperty(_a) {
-    var {
-        label,
-        property
-      } = _a,
-      a = __rest(_a, ["label", "property"]);
-    return XNode.create(PropertyEditor, Object.assign({
-      label: label
-    }, a), XNode.create("input", Object.assign({}, BindStyleValue(property.key), {
-      "data-flex": "stretch-full",
-      type: "tel"
-    })));
-  }
-  function TextProperty(_a) {
-    var {
-        label,
-        property,
-        attributeName
-      } = _a,
-      a = __rest(_a, ["label", "property", "attributeName"]);
-    return XNode.create(PropertyEditor, Object.assign({
-      label: label
-    }, a), XNode.create("input", Object.assign({
-      type: "text",
-      "data-element": "custom"
-    }, BindStyleValue(attributeName !== null && attributeName !== void 0 ? attributeName : property.key), {
-      "data-flex": "stretch-full"
-    })));
-  }
-  _export({
-    ExpanderPropertyEditor: ExpanderPropertyEditor,
-    DropDownProperty: DropDownProperty,
-    NumberProperty: NumberProperty,
-    TextProperty: TextProperty
-  });
+  var StylerSets;
   return {
-    setters: [function (_tslib) {
-      __rest = _tslib.__rest;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_webAtomsWebControlsDistBasicExpander) {
-      Expander = _webAtomsWebControlsDistBasicExpander.default;
-    }, function (_webAtomsWebControlsDistBasicSelect) {
-      Select = _webAtomsWebControlsDistBasicSelect.default;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
+    setters: [],
     execute: function () {
-      _export("BindEditor", BindEditor = Bind.forControl());
-      _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);
-      }));
-      _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: 1fr;
-    grid-template-rows: auto auto auto;
-    justify-items: stretch;
-    align-items: center;
-    column-gap: 5px;
-    max-width: 200px;
-    & > * {
-        width: 100%;
-    }
-    & > label {
-        grid-row: 1;
-        grid-column: 1;
-    }
-    & > [data-element=editor] {
-        grid-row: 2;
-        grid-column: 1;
-    }
-    & > [data-element=custom] {
-        grid-row: 3;
-        grid-column: 1;
-    }
-    & select {
-        outline: none;
-        border: none;
-        background-color: #e7e7e775;
-        border-radius: 9999px;
-        padding-left: 10px;
-        padding-right: 10px;
-    }
-    `.installGlobal("[data-element=property-editor]");
-      styled.css`
-        & select {
-            outline: none;
-            border: none;
-            background-color: #e7e7e775;
-            border-radius: 9999px;
-            padding-left: 10px;
-            padding-right: 10px;
+      _export("StylerSets", StylerSets = {
+        low: [],
+        high: [],
+        register(where, selector, element) {
+          const target = this[where];
+          if (element) {
+            target.push(element.expand(selector));
+            return;
+          }
+          target.push(selector);
         }
-    `.installGlobal("[data-element=expander-property-editor]");
+      });
     }
   };
 });
-//# sourceMappingURL=PropertyEditor.js.map
+//# sourceMappingURL=StylerSets.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/controls/PropertyEditor");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/StylerSets");
 System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core/AtomBinder"], function (_export, _context) {
   "use strict";
@@ -39397,9 +39142,10 @@ System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core
         relSize7XL: "80rem",
         relSizeFull: "100%",
         relSizeProse: "65ch",
+        bodyColor: "#dddddd50",
         defaultColor: "canvas",
         defaultTextColor: "canvastext",
-        borderColor: "lightgray",
+        borderColor: "#aaaaaa70",
         headerColor: "#0571ff30",
         headerTextColor: "",
         accentColor: "blue",
@@ -39427,8 +39173,9 @@ System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core
         linkColor: "blue",
         buttonBackground: "lightgreen",
         buttonText: "gray",
-        primaryBackground: "#b372dd50",
+        primaryBackground: "white",
         primaryColor: "gray",
+        primaryBorderColor: "#aaaaaa70",
         primaryAccent: "#6145a9c9",
         primaryAccentText: "white",
         primarySurface: "#FFFFFFA0",
@@ -39436,6 +39183,7 @@ System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core
         primaryButtonBackground: "lightblue",
         primaryButtonText: "gray",
         secondaryBackground: "#00808050",
+        secondaryBorderColor: "#aaaaaa70",
         secondaryColor: "gray",
         secondaryAccent: "#318984a8",
         secondaryAccentText: "white",
@@ -39444,6 +39192,7 @@ System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core
         secondaryButtonBackground: "lightgreen",
         secondaryButtonText: "gray",
         tertiaryBackground: "#cfa55c87",
+        tertiaryBorderColor: "#aaaaaa70",
         tertiaryColor: "gray",
         tertiaryAccent: "#e17b42cf",
         tertiaryAccentText: "white",
@@ -39451,7 +39200,7 @@ System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core
         tertiarySurfaceText: "gray",
         tertiaryButtonBackground: "lightgreen",
         tertiaryButtonText: "gray",
-        navBarBackground: "rgb(114 134 170 / 51%)",
+        navBarBackground: "rgb(255 255 255 / 51%)",
         navBarBackDropFilter: "blur(14px) saturate(180%)"
       }));
       _export("sizeVarList", sizeVarList = [stylerVars.sizeTiny, stylerVars.sizeSmall, stylerVars.sizeSmaller, stylerVars.sizeDefault, stylerVars.sizeLarger, stylerVars.sizeLarge, stylerVars.sizeMobileWidth, stylerVars.sizeTabletWidth, stylerVars.size10Pc, stylerVars.size20Pc, stylerVars.size25Pc, stylerVars.size30Pc, stylerVars.size33Pc, stylerVars.size40Pc, stylerVars.size50Pc, stylerVars.size60Pc, stylerVars.size66Pc, stylerVars.size70Pc, stylerVars.size75Pc, stylerVars.size80Pc, stylerVars.size90Pc, stylerVars.size100Pc, stylerVars.rem1, stylerVars.rem2, stylerVars.rem3, stylerVars.rem4, stylerVars.rem5, stylerVars.rem7_5, stylerVars.rem10, stylerVars.rem12_5, stylerVars.rem15, 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]);
@@ -39563,1139 +39312,551 @@ System.register(["@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/core
     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) {
+System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/style/styled", "../styler/StylerSets", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var styled, StylerProperty, colorVarList, createVarSet, sizeVarList, stylerBorder;
+  var XNode, AtomControl, styled, StylerSets, stylerVars, svg, svgCross;
+  function Block({
+    className,
+    title,
+    text,
+    rotate,
+    src,
+    factory
+  }) {
+    return () => {
+      const onClick = e => {
+        const editor = AtomControl.from(e.target);
+        const element = editor.buildXNode(factory());
+        editor.insertElement(element, void 0, true);
+      };
+      const onDragStart = e => {
+        const editor = AtomControl.from(e.target);
+        const ne = editor.buildXNode(factory());
+        e.dataTransfer.setDragImage(ne, 0, 0);
+        e.dataTransfer.setData("text/html", ne.outerHTML);
+      };
+      if (src) {
+        return XNode.create("img", {
+          "data-html-editor-element": "block",
+          class: className,
+          title: title,
+          src: src,
+          draggable: true,
+          text: text,
+          "event-click": onClick,
+          "event-dragstart": onDragStart
+        });
+      }
+      return XNode.create("i", {
+        "data-html-editor-element": "block",
+        class: className,
+        title: title,
+        draggable: true,
+        text: text,
+        "style-rotate": rotate ? "90deg" : void 0,
+        "event-click": onClick,
+        "event-dragstart": onDragStart
+      });
+    };
+  }
+  _export("Block", Block);
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      StylerProperty = _Styler.StylerProperty;
-      colorVarList = _Styler.colorVarList;
-      createVarSet = _Styler.createVarSet;
-      sizeVarList = _Styler.sizeVarList;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     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";
+      styled.css`
+        padding: 5px;
+        cursor: pointer;
+        &:hover {
+            background-color: #00800080;
+        }
+    `.installGlobal("[data-html-editor-element=block]");
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-items: start;
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
-  var StylerProperty, createSet, stylerDisplay;
-  return {
-    setters: [function (_Styler) {
-      StylerProperty = _Styler.StylerProperty;
-      createSet = _Styler.createSet;
-    }],
-    execute: function () {
-      _export("stylerDisplay", stylerDisplay = StylerProperty.create("styler-display", createSet("display", ["block", "flex", "grid", "inline-block", "inline-flex", "inline-grid", "none"])));
+    @media (min-width: 900px) {
+        & {
+            max-width: 900px;
+            margin-left: auto;
+            margin-right: auto;
+        }
     }
-  };
-});
-//# sourceMappingURL=display.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/display");
-System.register(["../../../Styler"], function (_export, _context) {
-  "use strict";
+    @media (min-width: 1200px) {
+        & {
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
-  var StylerProperty, createSet, stylerFlexDirection;
-  return {
-    setters: [function (_Styler) {
-      StylerProperty = _Styler.StylerProperty;
-      createSet = _Styler.createSet;
-    }],
-    execute: function () {
-      _export("stylerFlexDirection", stylerFlexDirection = new StylerProperty("styler-flex-direction", createSet("flex-direction", ["row", "column", "row-reverse", "column-reverse"])));
+    `.expand("[styler-layout=main]"));
+      svg = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`;
+      svgCross = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6z"/><path class="fa-primary" d=""/></svg>`;
+      StylerSets.register("low", styled.css`
+    display: flex;
+    padding: ${stylerVars.sizeSmall};
+    padding-left: ${stylerVars.sizeLarge};
+    padding-right: ${stylerVars.sizeLarge};
+    margin: ${stylerVars.sizeDefault};
+    position: sticky;
+    top: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeLarge};
+    border: solid 1px ${stylerVars.borderColor};
+    background: ${stylerVars.navBarBackground};
+    backdrop-filter: ${stylerVars.navBarBackDropFilter};
+    align-items: center;
+    justify-content: space-between;
+    z-index: 20;
+    & > h1, & > h2, & > h3, & > h5, & > h6 {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        font-weight: 400;
+    }
+    & > [styler-element=navbar] {
+        display: flex;
+        gap: 5px;
+        position: relative;
+        & > input[type=checkbox][styler-element=drawer] {
+            color: transparent;
+            display: none;
+        }
     }
-  };
-});
-//# sourceMappingURL=flex.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/flex/flex");
+    @media (max-width: 500px) {
+        & > [styler-element=navbar] {
-System.register(["../../../Styler"], function (_export, _context) {
-  "use strict";
+            & > nav {
+                display: none;
+            }
-  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")])),
-        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")])),
-        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"]))
-      });
+            & > input[type=checkbox][styler-element=drawer] {
+                display: inline-block;
+                background-image: url('data:image/svg+xml,${svg}');
+                background-repeat: no-repeat;
+                border-width: 1px;
+                border-style: solid;
+                border-color: transparent;
+                width: 20px;
+                height: 20px;
+                appearance: none;
+                outline: none;
+                &:checked {
+                    background-image: url('data:image/svg+xml,${svgCross}');
+                }
+                &:checked ~ nav {
+                    display: flex;
+                    gap: var(--size-default);
+                    flex-direction: column;
+                    position: absolute;
+                    right: 10px;
+                    top: 40px;
+                    background: ${stylerVars.primarySurface};
+                    color: ${stylerVars.primaryAccentText};
+                    padding: var(--size-default);
+                    border-radius: var(--size-default);
+                    box-shadow: 0 0 8px 2px gray;
+                    min-width: 200px;
+                    min-height: 300px;
+                }
+            }
+        }
+    }
+    `.expand("[styler-layout=floating-nav-bar]"));
+      StylerSets.register("low", styled.css`
+    display: flex;
+    padding: ${stylerVars.sizeSmall};
+    padding-left: ${stylerVars.sizeLarge};
+    padding-right: ${stylerVars.sizeLarge};
+    border-radius: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeLarge};
+    align-items: center;
+    justify-content: space-between;
+    & > h1, & > h2, & > h3, & > h5, & > h6 {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        font-weight: 400;
+    }
+    `.expand("[styler-layout=nav-bar]"));
     }
   };
 });
-//# sourceMappingURL=itemsPosition.js.map
+//# sourceMappingURL=Block.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/items-position/itemsPosition");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Block");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var styled, stylerVars, layoutTextBox;
+  var XNode, Block, StylerSets, styled, stylerVars, WrapGrid;
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_Block) {
+      Block = _Block.Block;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
-      _export("layoutTextBox", layoutTextBox = {
-        "text-box": styled.css`
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    &:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
         display: flex;
-        flex-direction: row;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
         justify-items: center;
-        align-items: stretch;
-        & > p:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-    `
-      });
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=wrap-list]"));
+      _export("WrapGrid", WrapGrid = Block({
+        className: "fa-duotone fa-grid-horizontal fa-rotate-90",
+        title: "Wrap Grid",
+        factory: () => XNode.create("div", {
+          "styler-layout": "wrap-list"
+        })
+      }));
     }
   };
 });
-//# sourceMappingURL=layoutTextBox.js.map
+//# sourceMappingURL=WrapGrid.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutTextBox");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/WrapGrid");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], 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 styled, stylerVars, layoutWrapList;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutWrapList", layoutWrapList = {
-        "wrap-list": styled.css`
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        &:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-    `
-      });
-    }
-  };
-});
-//# sourceMappingURL=layoutWrapList.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutWrapList");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutImageBox;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutImageBox", layoutImageBox = {
-        "image-box": styled.css`
-        display: flex;
-        flex-direction: column;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: stretch;
-        contain: content;
-        position: relative;
-        & > * {
-            padding: ${stylerVars.sizeDefault};
-            flex: 1 1 100%;
-            max-width: 100%;
-        }
-        @media (min-width: 600px) {
-            & {
-                flex-direction: row;
-            }
-            & > * {
-                padding: ${stylerVars.sizeDefault};
-                flex: 1 1 50%;
-                max-width: 50%;
-            }
-        }
-        & > img {
-            align-self: center;
-            border-radius: ${stylerVars.sizeLarge}
-        }
-        & > section {
-            & > h4[styler-element=accent] {
-                padding: ${stylerVars.sizeLarge};
-                border-radius: ${stylerVars.sizeLarge};
-            }
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-    `,
-        "vertical-image-box": styled.css`
-        display: flex;
-        flex-direction: column;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: stretch;
-        contain: content;
-        & > img {
-            align-self: center;
-            border-radius: ${stylerVars.sizeLarge};
-            max-width: 100%;
-        }
-        & > * {
-            padding: ${stylerVars.sizeDefault};
-            flex: 1 1 100%;
-        }
-        & > section {
-            & > h4[styler-element=accent] {
-                padding: ${stylerVars.sizeLarge};
-                border-radius: ${stylerVars.sizeLarge};
-            }
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-        `
-      });
-    }
-  };
-});
-//# sourceMappingURL=layoutImageBox.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutImageBox");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutRightImageBox;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutRightImageBox", layoutRightImageBox = {
-        "right-image-box": styled.css`
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: stretch;
-        contain: content;
-        & > * {
-            padding: ${stylerVars.sizeDefault};
-            flex: 1 1 100%;
-            max-width: 100%;
-        }
-        @media (min-width: 600px) {
-            & {
-                flex-direction: row-reverse;
-            }
-            & > * {
-                padding: ${stylerVars.sizeDefault};
-                flex: 1 1 50%;
-                max-width: 50%;
-            }
-        }
-        & > img {
-            align-self: center;
-            border-radius: ${stylerVars.sizeLarge}
-        }
-        & > section {
-            & > h4[styler-element=accent] {
-                padding: ${stylerVars.sizeLarge};
-                border-radius: ${stylerVars.sizeLarge};
-            }
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-    `
-      });
-    }
-  };
-});
-//# sourceMappingURL=layoutRightImageBox.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutRightImageBox");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutColumn2Box;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutColumn2Box", layoutColumn2Box = {
-        "columns-2": styled.css`
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        gap: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: stretch;
-        contain: content;
-        @media (min-width: 600px) {
-            & {
-                flex-direction: row;
-                flex-wrap: nowrap;
-            }
-            & > * {
-                width: 50%;
-                max-width: 50%;
-            }
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-`
-      });
-    }
-  };
-});
-//# sourceMappingURL=layoutColumn2Box.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutColumn2Box");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutColumn;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutColumn", layoutColumn = {
-        "column": styled.css`
-        display: flex;
-        flex-direction: column;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: stretch;
-        & > * {
-            padding: ${stylerVars.sizeDefault};
-            flex: 1 1 100%;
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-    `
-      });
+  var __rest, XNode, AtomControl, Expander, Select, Bind, styled, BindEditor, BindStyleValue, BindStyleCustom;
+  function PropertyEditor(_a, ...nodes) {
+    var _b, _c;
+    var _d;
+    var {
+        label = void 0,
+        custom = void 0
+      } = _a,
+      a = __rest(_a, ["label", "custom"]);
+    if (!label && nodes.length === 1) {
+      return nodes[0];
     }
-  };
-});
-//# sourceMappingURL=layoutColumn.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutColumn");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutRow;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutRow", layoutRow = {
-        "row": styled.css`
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: ${stylerVars.sizeDefault};
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: center;
-        & > * {
-            padding: ${stylerVars.sizeDefault};
-            flex: 1 1 100%;
-        }
-        @media (min-width: 600px) {
-            & {
-                flex-direction: row;
-                flex-wrap: nowrap;
-            }
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-      `
-      });
+    for (const iterator of nodes) {
+      (_c = (_d = (_b = iterator.attributes) !== null && _b !== void 0 ? _b : iterator.attributes = {})["data-element"]) !== null && _c !== void 0 ? _c : _d["data-element"] = "editor";
     }
-  };
-});
-//# sourceMappingURL=layoutRow.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutRow");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutBox;
+    return XNode.create("div", Object.assign({
+      "data-element": "property-editor"
+    }, a), label && XNode.create("label", {
+      "data-font-size": "small"
+    }, label), ...nodes, custom);
+  }
+  function ExpanderPropertyEditor(_a, ...nodes) {
+    var {
+        isExpanded = false,
+        label
+      } = _a,
+      a = __rest(_a, ["isExpanded", "label"]);
+    const child = nodes.length > 1 ? XNode.create("div", {
+      "data-layout": "vertical-flex-stretch-items"
+    }, ...nodes) : nodes[0];
+    return XNode.create(Expander, Object.assign({
+      "data-element": "expander-property-editor",
+      isExpanded: isExpanded
+    }, a), label && XNode.create("label", null, label), child);
+  }
+  function DropDownProperty(_a) {
+    var {
+        label,
+        property
+      } = _a,
+      a = __rest(_a, ["label", "property"]);
+    return XNode.create(PropertyEditor, Object.assign({
+      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 => pair.toPair())]
+    })));
+  }
+  function NumberProperty(_a) {
+    var {
+        label,
+        property
+      } = _a,
+      a = __rest(_a, ["label", "property"]);
+    return XNode.create(PropertyEditor, Object.assign({
+      label: label
+    }, a), XNode.create("input", Object.assign({}, BindStyleValue(property.key), {
+      "data-flex": "stretch-full",
+      type: "tel"
+    })));
+  }
+  function TextProperty(_a) {
+    var {
+        label,
+        property,
+        attributeName
+      } = _a,
+      a = __rest(_a, ["label", "property", "attributeName"]);
+    return XNode.create(PropertyEditor, Object.assign({
+      label: label
+    }, a), XNode.create("input", Object.assign({
+      type: "text",
+      "data-element": "custom"
+    }, BindStyleValue(attributeName !== null && attributeName !== void 0 ? attributeName : property.key), {
+      "data-flex": "stretch-full"
+    })));
+  }
+  _export({
+    ExpanderPropertyEditor: ExpanderPropertyEditor,
+    DropDownProperty: DropDownProperty,
+    NumberProperty: NumberProperty,
+    TextProperty: TextProperty
+  });
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
+    setters: [function (_tslib) {
+      __rest = _tslib.__rest;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsWebControlsDistBasicExpander) {
+      Expander = _webAtomsWebControlsDistBasicExpander.default;
+    }, function (_webAtomsWebControlsDistBasicSelect) {
+      Select = _webAtomsWebControlsDistBasicSelect.default;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
     }],
     execute: function () {
-      _export("layoutBox", layoutBox = {
-        "block": styled.css`
-        display: block;
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-    `
-      });
-    }
-  };
-});
-//# sourceMappingURL=layoutBlock.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutBlock");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
+      _export("BindEditor", BindEditor = Bind.forControl());
+      _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);
+      }));
+      _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`
-  var styled, stylerVars, layoutNavBar;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutNavBar", layoutNavBar = {
-        "nav-bar": styled.css`
-        display: flex;
-        padding: ${stylerVars.sizeSmall};
-        padding-left: ${stylerVars.sizeLarge};
-        padding-right: ${stylerVars.sizeLarge};
-        border-radius: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeLarge};
-        align-items: center;
-        justify-content: space-between;
-        & > h1, & > h2, & > h3, & > h5, & > h6 {
-            margin-block-start: 0;
-            margin-block-end: 0;
-        }
-    `
-      });
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    justify-items: stretch;
+    align-items: center;
+    column-gap: 5px;
+    max-width: 200px;
+    & > * {
+        width: 100%;
     }
-  };
-});
-//# sourceMappingURL=layoutNavBar.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutNavBar");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, svg, svgCross, layoutFloatingNavBar;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      svg = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`;
-      svgCross = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6z"/><path class="fa-primary" d=""/></svg>`;
-      _export("layoutFloatingNavBar", layoutFloatingNavBar = {
-        "floating-nav-bar": styled.css`
-        display: flex;
-        padding: ${stylerVars.sizeSmall};
-        padding-left: ${stylerVars.sizeLarge};
-        padding-right: ${stylerVars.sizeLarge};
-        margin: ${stylerVars.sizeDefault};
-        position: sticky;
-        top: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeLarge};
-        background: ${stylerVars.navBarBackground};
-        backdrop-filter: ${stylerVars.navBarBackDropFilter};
-        align-items: center;
-        justify-content: space-between;
-        z-index: 20;
-        & > h1, & > h2, & > h3, & > h5, & > h6 {
-            margin-block-start: 0;
-            margin-block-end: 0;
-        }
-        & > [styler-element=navbar] {
-            display: flex;
-            gap: 5px;
-            position: relative;
-            & > input[type=checkbox][styler-element=drawer] {
-                color: transparent;
-                display: none;
-            }
-        }
-        @media (max-width: 500px) {
-            & > [styler-element=navbar] {
-                & > nav {
-                    display: none;
-                }
-                & > input[type=checkbox][styler-element=drawer] {
-                    display: inline-block;
-                    background-image: url('data:image/svg+xml,${svg}');
-                    background-repeat: no-repeat;
-                    border-width: 1px;
-                    border-style: solid;
-                    border-color: transparent;
-                    width: 20px;
-                    height: 20px;
-                    appearance: none;
-                    outline: none;
-                    &:checked {
-                        background-image: url('data:image/svg+xml,${svgCross}');
-                    }
-                    &:checked ~ nav {
-                        display: flex;
-                        gap: var(--size-default);
-                        flex-direction: column;
-                        position: absolute;
-                        right: 10px;
-                        top: 40px;
-                        background: ${stylerVars.primarySurface};
-                        color: ${stylerVars.primaryAccentText};
-                        padding: var(--size-default);
-                        border-radius: var(--size-default);
-                        box-shadow: 0 0 8px 2px gray;
-                        min-width: 200px;
-                        min-height: 300px;
-                    }
-                }
-            }
-        }
-    `
-      });
+    & > label {
+        grid-row: 1;
+        grid-column: 1;
     }
-  };
-});
-//# sourceMappingURL=layoutFloatingNavBar.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutFloatingNavBar");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, layoutColumn3Box;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("layoutColumn3Box", layoutColumn3Box = {
-        "columns-3": styled.css`
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        gap: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        justify-items: center;
-        align-items: stretch;
-        contain: content;
-        @media (min-width: 600px) {
-            & {
-                flex-direction: row;
-                flex-wrap: nowrap;
-            }
-            & > * {
-                width: 33%;
-                max-width: 33%;
-            }
-        }
-        & > *:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
+    & > [data-element=editor] {
+        grid-row: 2;
+        grid-column: 1;
+    }
-        }
+    & > [data-element=custom] {
+        grid-row: 3;
+        grid-column: 1;
+    }
+    & select {
+        outline: none;
+        border: none;
+        background-color: #e7e7e775;
+        border-radius: 9999px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    `.installGlobal("[data-element=property-editor]");
+      styled.css`
-    `
-      });
+        & select {
+            outline: none;
+            border: none;
+            background-color: #e7e7e775;
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    `.installGlobal("[data-element=expander-property-editor]");
     }
   };
 });
-//# sourceMappingURL=layoutColumn3Box.js.map
+//# sourceMappingURL=PropertyEditor.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutColumn3Box");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/controls/PropertyEditor");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/style/styled", "../Styler"], function (_export, _context) {
   "use strict";
-  var styled, stylerVars, layoutImageCard;
+  var styled, StylerProperty, colorVarList, createVarSet, sizeVarList, stylerBorder;
   return {
     setters: [function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
     }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
+      StylerProperty = _Styler.StylerProperty;
+      colorVarList = _Styler.colorVarList;
+      createVarSet = _Styler.createVarSet;
+      sizeVarList = _Styler.sizeVarList;
     }],
     execute: function () {
-      _export("layoutImageCard", layoutImageCard = {
-        "image-card": styled.css`
-        display: grid;
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr 1fr;
-        justify-items: stretch;
-        align-items: stretch;
-        contain: content;
-        & > h4 {
-            max-width: 100%;
-            padding: ${stylerVars.sizeDefault};
-            grid-column: 1;
-            grid-row: 1;
-            margin-top: 0;
-            margin-bottom: 0;
-        }
-        & > img {
-            padding: ${stylerVars.sizeDefault};
-            margin: ${stylerVars.sizeDefault};
-            align-self: center;
-            max-width: 100%;
-            grid-column: 1;
-            grid-row: 2;
-        }
-        & > section {
-            max-width: 100%;
-            margin: ${stylerVars.sizeDefault};
-            padding: ${stylerVars.sizeDefault};
-            border-radius: ${stylerVars.sizeDefault};
-            grid-column: 1;
-            grid-row: 3;
-        }
-        @media (min-width: 600px) {
-            & {
-                grid-template-columns: 1fr 1fr;
-                grid-template-rows: auto 1fr;
-            }
-            & > h4 {
-                max-width: 100%;
-                grid-column: 1 / span 2;
-                grid-row: 1;
-            }
-            & > img {
-                padding: ${stylerVars.sizeDefault};
-                max-width: 100%;
-                grid-column: 1;
-                grid-row: 2;
-            }
-            & > section {
-                max-width: 100%;
-                grid-column: 2;
-                grid-row: 2;
-            }
-        }
-        & > section:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-        & > h4:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Title";
-        }
-    `
+      _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=layoutImageCard.js.map
+//# sourceMappingURL=stylerBorder.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutImageCard");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/stylerBorder");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
+System.register(["../../Styler"], function (_export, _context) {
   "use strict";
-  var styled, stylerVars, layoutCard;
+  var StylerProperty, createSet, stylerDisplay;
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
+    setters: [function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      createSet = _Styler.createSet;
     }],
     execute: function () {
-      _export("layoutCard", layoutCard = {
-        "card": styled.css`
-        display: grid;
-        margin: ${stylerVars.sizeDefault};
-        border-radius: ${stylerVars.sizeDefault};
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr;
-        justify-items: stretch;
-        align-items: stretch;
-        contain: content;
-        & > h4 {
-            max-width: 100%;
-            padding: ${stylerVars.sizeDefault};
-            font-size: ${stylerVars.rem1_5};
-            grid-column: 1;
-            grid-row: 1;
-            margin-top: 0;
-            margin-bottom: 0;
-        }
-        & > section {
-            max-width: 100%;
-            margin: ${stylerVars.sizeDefault};
-            padding: ${stylerVars.sizeDefault};
-            border-radius: ${stylerVars.sizeDefault};
-            grid-column: 1;
-            grid-row: 3;
-        }
-        & > section:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Container";
-        }
-        & > h4:empty:before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "Title";
-        }
-    `
-      });
+      _export("stylerDisplay", stylerDisplay = StylerProperty.create("styler-display", createSet("display", ["block", "flex", "grid", "inline-block", "inline-flex", "inline-grid", "none"])));
     }
   };
 });
-//# sourceMappingURL=layoutCard.js.map
+//# sourceMappingURL=display.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutCard");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/display");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
+System.register(["../../../Styler"], function (_export, _context) {
   "use strict";
-  var styled, stylerVars, layoutComponent;
+  var StylerProperty, createSet, stylerFlexDirection;
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
+    setters: [function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      createSet = _Styler.createSet;
     }],
     execute: function () {
-      _export("layoutComponent", layoutComponent = {
-        "component": styled.css`
-        display: block;
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        &:not([data-ready]):before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            padding: ${stylerVars.sizeDefault};
-            border-radius: ${stylerVars.sizeDefault};
-            content: "Loading Component ...";
-        }
-    `
-      });
+      _export("stylerFlexDirection", stylerFlexDirection = new StylerProperty("styler-flex-direction", createSet("flex-direction", ["row", "column", "row-reverse", "column-reverse"])));
     }
   };
 });
-//# sourceMappingURL=layoutComponent.js.map
+//# sourceMappingURL=flex.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutComponent");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/flex/flex");
-System.register(["@web-atoms/core/dist/style/styled", "../../../Styler"], function (_export, _context) {
+System.register(["../../../Styler"], function (_export, _context) {
   "use strict";
-  var styled, stylerVars, layoutMain;
+  var StylerProperty, createSet, createVarSet, pair, sizeVarList, itemPositions;
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
+    setters: [function (_Styler) {
+      StylerProperty = _Styler.StylerProperty;
+      createSet = _Styler.createSet;
+      createVarSet = _Styler.createVarSet;
+      pair = _Styler.pair;
+      sizeVarList = _Styler.sizeVarList;
     }],
     execute: function () {
-      _export("layoutMain", layoutMain = {
-        "main": styled.css`
-        display: flex;
-        flex-direction: column;
-		align-items: stretch;
-		justify-items: start;
-        padding: ${stylerVars.sizeDefault};
-        margin: ${stylerVars.sizeDefault};
-        @media (min-width: 900px) {
-            & {
-                max-width: 900px;
-    		    margin-left: auto;
-	    	    margin-right: auto;
-            }
-        }
-        @media (min-width: 1200px) {
-            & {
-                max-width: 1200px;
-    		    margin-left: auto;
-	    	    margin-right: auto;
-            }
-        }
-    `
+      _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")])),
+        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")])),
+        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"]))
       });
     }
   };
 });
-//# sourceMappingURL=layoutMain.js.map
+//# sourceMappingURL=itemsPosition.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/blocks/layoutMain");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/layouts/items-position/itemsPosition");
-System.register(["../../Styler", "./blocks/layoutTextBox", "./blocks/layoutWrapList", "./blocks/layoutImageBox", "./blocks/layoutRightImageBox", "./blocks/layoutColumn2Box", "./blocks/layoutColumn", "./blocks/layoutRow", "./blocks/layoutBlock", "./blocks/layoutNavBar", "./blocks/layoutFloatingNavBar", "./blocks/layoutColumn3Box", "./blocks/layoutImageCard", "./blocks/layoutCard", "./blocks/layoutComponent", "./blocks/layoutMain"], function (_export, _context) {
+System.register(["../../Styler"], function (_export, _context) {
   "use strict";
-  var StylerProperty, layoutTextBox, layoutWrapList, layoutImageBox, layoutRightImageBox, layoutColumn2Box, layoutColumn, layoutRow, layoutBox, layoutNavBar, layoutFloatingNavBar, layoutColumn3Box, layoutImageCard, layoutCard, layoutComponent, layoutMain, stylerLayout;
+  var StylerProperty, stylerLayout;
   return {
     setters: [function (_Styler) {
       StylerProperty = _Styler.StylerProperty;
-    }, function (_blocksLayoutTextBox) {
-      layoutTextBox = _blocksLayoutTextBox.layoutTextBox;
-    }, function (_blocksLayoutWrapList) {
-      layoutWrapList = _blocksLayoutWrapList.layoutWrapList;
-    }, function (_blocksLayoutImageBox) {
-      layoutImageBox = _blocksLayoutImageBox.layoutImageBox;
-    }, function (_blocksLayoutRightImageBox) {
-      layoutRightImageBox = _blocksLayoutRightImageBox.layoutRightImageBox;
-    }, function (_blocksLayoutColumn2Box) {
-      layoutColumn2Box = _blocksLayoutColumn2Box.layoutColumn2Box;
-    }, function (_blocksLayoutColumn) {
-      layoutColumn = _blocksLayoutColumn.layoutColumn;
-    }, function (_blocksLayoutRow) {
-      layoutRow = _blocksLayoutRow.layoutRow;
-    }, function (_blocksLayoutBlock) {
-      layoutBox = _blocksLayoutBlock.layoutBox;
-    }, function (_blocksLayoutNavBar) {
-      layoutNavBar = _blocksLayoutNavBar.layoutNavBar;
-    }, function (_blocksLayoutFloatingNavBar) {
-      layoutFloatingNavBar = _blocksLayoutFloatingNavBar.layoutFloatingNavBar;
-    }, function (_blocksLayoutColumn3Box) {
-      layoutColumn3Box = _blocksLayoutColumn3Box.layoutColumn3Box;
-    }, function (_blocksLayoutImageCard) {
-      layoutImageCard = _blocksLayoutImageCard.layoutImageCard;
-    }, function (_blocksLayoutCard) {
-      layoutCard = _blocksLayoutCard.layoutCard;
-    }, function (_blocksLayoutComponent) {
-      layoutComponent = _blocksLayoutComponent.layoutComponent;
-    }, function (_blocksLayoutMain) {
-      layoutMain = _blocksLayoutMain.layoutMain;
-    }],
-    execute: function () {
-      _export("stylerLayout", stylerLayout = StylerProperty.create("styler-layout", Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, layoutMain), layoutTextBox), layoutWrapList), layoutImageCard), layoutImageBox), layoutRightImageBox), layoutColumn2Box), layoutColumn3Box), layoutColumn), layoutRow), layoutBox), layoutNavBar), layoutFloatingNavBar), layoutCard), layoutComponent)));
+    }],
+    execute: function () {
+      _export("stylerLayout", stylerLayout = StylerProperty.create("styler-layout", {}));
     }
   };
 });
@@ -40883,6 +40044,7 @@ System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function
         "primary": styled.css`
         background-color: ${stylerVars.primaryBackground};
         color: ${stylerVars.primaryColor};
+        border: solid 1px ${stylerVars.primaryBorderColor};
         & [styler-element=accent] {
             background-color: ${stylerVars.primaryAccent};
@@ -40911,6 +40073,7 @@ System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function
         "secondary": styled.css`
         background-color: ${stylerVars.secondaryBackground};
         color: ${stylerVars.secondaryColor};
+        border: solid 1px ${stylerVars.secondaryBorderColor};
         & [styler-element=accent] {
             background-color: ${stylerVars.secondaryAccent};
@@ -40939,6 +40102,7 @@ System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function
         "tertiary": styled.css`
         background-color: ${stylerVars.tertiaryBackground};
         color: ${stylerVars.tertiaryColor};
+        border: solid 1px ${stylerVars.tertiaryBorderColor};
         & [styler-element=accent] {
             background-color: ${stylerVars.tertiaryAccent};
@@ -40971,138 +40135,10 @@ System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/color-sets/stylerColorSets");
-System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
-  "use strict";
-  var styled, elementImageLink;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
-    execute: function () {
-      _export("elementImageLink", elementImageLink = {
-        "image-link": styled.css`
-            border: solid 1px transparent;
-            outline: none;
-            text-decoration: none;
-            display: flex;
-            &:hover {
-                border-color: green;
-                text-decoration: underline;
-            }
-        `
-      });
-    }
-  };
-});
-//# sourceMappingURL=elementImageLink.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elementImageLink");
-System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, elementLinkButton;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("elementLinkButton", elementLinkButton = {
-        "link-button": styled.css`
-        display: inline-flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: ${stylerVars.sizeDefault};
-        padding-top: ${stylerVars.sizeTiny};
-        padding-bottom: ${stylerVars.sizeTiny};
-        padding-left: ${stylerVars.sizeLarge};
-        padding-right: ${stylerVars.sizeLarge};
-        background: ${stylerVars.buttonBackground};
-        color: ${stylerVars.buttonText};
-        border: none;
-        border-radius: ${stylerVars.sizeLarge};
-        text-decoration: none;
-        &:hover {
-            text-decoration: underline;
-        }
-    `
-      });
-    }
-  };
-});
-//# sourceMappingURL=elementLinkButton.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elementLinkButton");
-System.register(["@web-atoms/core/dist/style/styled", "../../Styler"], function (_export, _context) {
-  "use strict";
-  var styled, stylerVars, elementLinkIconButton;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_Styler) {
-      stylerVars = _Styler.stylerVars;
-    }],
-    execute: function () {
-      _export("elementLinkIconButton", elementLinkIconButton = {
-        "link-icon-button": styled.css`
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: ${stylerVars.sizeDefault};
-        padding-top: ${stylerVars.sizeTiny};
-        padding-bottom: ${stylerVars.sizeTiny};
-        padding-left: ${stylerVars.sizeLarge};
-        padding-right: ${stylerVars.sizeLarge};
-        background: ${stylerVars.buttonBackground};
-        color: ${stylerVars.buttonText};
-        border: none;
-        border-radius: ${stylerVars.sizeLarge};
-        text-decoration: none;
-        &:hover {
-            text-decoration: underline;
-        }
-    `
-      });
-    }
-  };
-});
-//# sourceMappingURL=elementLinkIconButton.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elementLinkIconButton");
-System.register(["../../Styler", "./elementImageLink", "./elementLinkButton", "./elementLinkIconButton"], function (_export, _context) {
-  "use strict";
-  var StylerProperty, elementImageLink, elementLinkButton, elementLinkIconButton, stylerElement;
-  return {
-    setters: [function (_Styler) {
-      StylerProperty = _Styler.StylerProperty;
-    }, function (_elementImageLink) {
-      elementImageLink = _elementImageLink.elementImageLink;
-    }, function (_elementLinkButton) {
-      elementLinkButton = _elementLinkButton.elementLinkButton;
-    }, function (_elementLinkIconButton) {
-      elementLinkIconButton = _elementLinkIconButton.elementLinkIconButton;
-    }],
-    execute: function () {
-      _export("stylerElement", stylerElement = StylerProperty.create("styler-element", Object.assign(Object.assign(Object.assign({}, elementImageLink), elementLinkButton), elementLinkIconButton)));
-    }
-  };
-});
-//# sourceMappingURL=elements.js.map
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/properties/elements/elements");
-System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/display", "./properties/layouts/flex/flex", "./properties/layouts/items-position/itemsPosition", "./properties/layouts/layout", "./properties/stylerPosition", "./properties/stylerSizes", "./properties/stylerSpace", "./properties/text/stylerText", "./properties/stylerBackground", "./properties/color-sets/stylerColorSets", "./properties/elements/elements"], function (_export, _context) {
+System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/display", "./properties/layouts/flex/flex", "./properties/layouts/items-position/itemsPosition", "./properties/layouts/layout", "./properties/stylerPosition", "./properties/stylerSizes", "./properties/stylerSpace", "./properties/text/stylerText", "./properties/stylerBackground", "./properties/color-sets/stylerColorSets", "./StylerSets"], function (_export, _context) {
   "use strict";
-  var StylerVariable, stylerVars, stylerBorder, stylerDisplay, stylerFlexDirection, itemPositions, stylerLayout, stylerPosition, stylerSizes, stylerSpace, stylerText, stylerBackground, stylerColorSets, stylerElement, StylerSet, vars;
+  var StylerVariable, stylerVars, stylerBorder, stylerDisplay, stylerFlexDirection, itemPositions, stylerLayout, stylerPosition, stylerSizes, stylerSpace, stylerText, stylerBackground, stylerColorSets, StylerSets, StylerSet, vars;
   _export("StylerSet", void 0);
   return {
     setters: [function (_Styler) {
@@ -41130,8 +40166,8 @@ System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/
       stylerBackground = _propertiesStylerBackground.stylerBackground;
     }, function (_propertiesColorSetsStylerColorSets) {
       stylerColorSets = _propertiesColorSetsStylerColorSets.stylerColorSets;
-    }, function (_propertiesElementsElements) {
-      stylerElement = _propertiesElementsElements.stylerElement;
+    }, function (_StylerSets) {
+      StylerSets = _StylerSets.StylerSets;
     }],
     execute: function () {
       vars = [];
@@ -41147,7 +40183,6 @@ System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/
           this.varsCss = this.vars.join("\n\t\t\t");
           this.properties = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
             stylerLayout,
-            stylerElement,
             stylerColorSets,
             stylerDisplay,
             stylerFlexDirection
@@ -41169,13 +40204,18 @@ System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/
     :root{
         ${this.vars.join("\n")}
     }
-    ${properties.join("\n")}
     body {
-        background-color: var(--default-color);
+        background-color: var(--body-color);
         color: var(--default-text-color);
     }
+    ${StylerSets.low.join("\n")}
+    ${properties.join("\n")}
+    ${StylerSets.high.join("\n")}
         `;
         }
       });
@@ -41979,10 +41019,10 @@ System.register([], function (_export, _context) {
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/defaultImage");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, defaultImageSrc, RightImageBox, ImageBox;
+  var XNode, Block, defaultImageSrc, StylerSets, styled, stylerVars, ImageBox;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -41990,20 +41030,74 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
       Block = _Block.Block;
     }, function (_defaultImage) {
       defaultImageSrc = _defaultImage.defaultImageSrc;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
-      _export("RightImageBox", RightImageBox = Block({
-        className: "material-symbols-outlined",
-        title: "Add Image Box with Image on Right",
-        text: "\uf864",
-        factory: () => XNode.create("section", {
-          "styler-layout": "right-image-box"
-        }, XNode.create("img", {
-          src: defaultImageSrc
-        }), XNode.create("section", null, XNode.create("h4", {
-          "styler-element": "accent"
-        }, "Header"), XNode.create("div", null, XNode.create("p", null, "Content here..."))))
-      }));
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: column;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    contain: content;
+    position: relative;
+    & > * {
+        padding: ${stylerVars.sizeDefault};
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+    @media (min-width: 600px) {
+        & {
+            flex-direction: row;
+        }
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 50%;
+            max-width: 50%;
+        }
+    }
+    & > img {
+        align-self: center;
+        border-radius: ${stylerVars.sizeLarge}
+    }
+    & > section {
+        & > h4[styler-element=accent] {
+            padding: ${stylerVars.sizeLarge};
+            border-radius: ${stylerVars.sizeLarge};
+        }
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=image-box]"));
       _export("ImageBox", ImageBox = Block({
         className: "material-symbols-outlined",
         title: "Add Image Box",
@@ -42023,10 +41117,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/ImageBox");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/row.png"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/row.png", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, row, RowBox;
+  var XNode, Block, row, StylerSets, styled, stylerVars, RowBox;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -42034,8 +41128,56 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/soc
       Block = _Block.Block;
     }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsRowPng) {
       row = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsRowPng.default;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: center;
+    & > * {
+        padding: ${stylerVars.sizeDefault};
+        flex: 1 1 100%;
+    }
+    @media (min-width: 600px) {
+        & {
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=row]"));
       _export("RowBox", RowBox = Block({
         title: "Add Row",
         src: row,
@@ -42050,10 +41192,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/soc
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/RowBox");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column.png", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-2.png", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-3.png"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column.png", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, column, column2, column3, ColumnBox, Columns2, Columns3;
+  var XNode, Block, column, StylerSets, styled, stylerVars, ColumnBox;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -42061,12 +41203,47 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/soc
       Block = _Block.Block;
     }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumnPng) {
       column = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumnPng.default;
-    }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn2Png) {
-      column2 = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn2Png.default;
-    }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn3Png) {
-      column3 = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn3Png.default;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: column;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    & > * {
+        padding: ${stylerVars.sizeDefault};
+        flex: 1 1 100%;
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+`.expand("[styler-layout=column]"));
       _export("ColumnBox", ColumnBox = Block({
         title: "Add Single Column Box",
         src: column,
@@ -42074,20 +41251,6 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/soc
           "styler-layout": "column"
         }, XNode.create("section", null), XNode.create("section", null))
       }));
-      _export("Columns2", Columns2 = Block({
-        title: "Add 2 Columns",
-        src: column2,
-        factory: () => XNode.create("section", {
-          "styler-layout": "columns-2"
-        }, XNode.create("section", null), XNode.create("section", null))
-      }));
-      _export("Columns3", Columns3 = Block({
-        title: "Add 3 Columns",
-        src: column3,
-        factory: () => XNode.create("section", {
-          "styler-layout": "columns-3"
-        }, XNode.create("section", null), XNode.create("section", null), XNode.create("section", null))
-      }));
     }
   };
 });
@@ -42095,10 +41258,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/soc
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/ColumnBox");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/vertical-image-box.png"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/vertical-image-box.png", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, defaultImageSrc, verticalImageBox, VerticalImageBox;
+  var XNode, Block, defaultImageSrc, verticalImageBox, StylerSets, styled, stylerVars, VerticalImageBox;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -42108,8 +41271,62 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage",
       defaultImageSrc = _defaultImage.defaultImageSrc;
     }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsVerticalImageBoxPng) {
       verticalImageBox = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsVerticalImageBoxPng.default;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: column;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    contain: content;
+    & > img {
+        align-self: center;
+        border-radius: ${stylerVars.sizeLarge};
+        max-width: 100%;
+    }
+    & > * {
+        padding: ${stylerVars.sizeDefault};
+        flex: 1 1 100%;
+    }
+    & > section {
+        & > h4[styler-element=accent] {
+            padding: ${stylerVars.sizeLarge};
+            border-radius: ${stylerVars.sizeLarge};
+        }
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=vertical-image-box]"));
       _export("VerticalImageBox", VerticalImageBox = Block({
         className: "fas fa-image",
         title: "Add Vertical Image Box",
@@ -42154,10 +41371,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Image");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, defaultImageSrc, ImageCard;
+  var XNode, Block, defaultImageSrc, StylerSets, styled, stylerVars, ImageCard;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -42165,8 +41382,112 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
       Block = _Block.Block;
     }, function (_defaultImage) {
       defaultImageSrc = _defaultImage.defaultImageSrc;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+display: grid;
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr 1fr;
+    justify-items: stretch;
+    align-items: stretch;
+    contain: content;
+    & > h4 {
+        max-width: 100%;
+        padding: ${stylerVars.sizeDefault};
+        grid-column: 1;
+        grid-row: 1;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    & > img {
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        align-self: center;
+        max-width: 100%;
+        grid-column: 1;
+        grid-row: 2;
+    }
+    & > section {
+        max-width: 100%;
+        margin: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        grid-column: 1;
+        grid-row: 3;
+    }
+    @media (min-width: 600px) {
+        & {
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto 1fr;
+        }
+        & > h4 {
+            max-width: 100%;
+            grid-column: 1 / span 2;
+            grid-row: 1;
+        }
+        & > img {
+            padding: ${stylerVars.sizeDefault};
+            max-width: 100%;
+            grid-column: 1;
+            grid-row: 2;
+        }
+        & > section {
+            max-width: 100%;
+            grid-column: 2;
+            grid-row: 2;
+        }
+    }
+    & > section:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    & > h4:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Title";
+    }
+    `.expand("[styler-layout=image-card]"));
       _export("ImageCard", ImageCard = Block({
         className: "fad fa-id-card",
         title: "Add Image Card",
@@ -42183,18 +41504,54 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/ImageCard");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, src, TextBox;
+  var XNode, Block, StylerSets, styled, stylerVars, src, TextBox;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_Block) {
       Block = _Block.Block;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
       src = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+`;
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: row;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    & > p:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=text-box]"));
       _export("TextBox", TextBox = Block({
         className: "material-symbols-outlined",
         title: "Add Text Box",
@@ -42210,10 +41567,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_expor
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/TextBox");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/card.png"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/card.png", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, card, Card;
+  var XNode, Block, card, StylerSets, styled, stylerVars, Card;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -42221,8 +41578,80 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/soc
       Block = _Block.Block;
     }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsCardPng) {
       card = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsCardPng.default;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+    display: grid;
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    justify-items: stretch;
+    align-items: stretch;
+    contain: content;
+    & > h4 {
+        max-width: 100%;
+        padding: ${stylerVars.sizeDefault};
+        font-size: ${stylerVars.rem1_5};
+        grid-column: 1;
+        grid-row: 1;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    & > section {
+        max-width: 100%;
+        margin: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        grid-column: 1;
+        grid-row: 3;
+    }
+    & > section:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    & > h4:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Title";
+    }
+    `.expand("[styler-layout=card]"));
       _export("Card", Card = Block({
         title: "Add Card",
         src: card,
@@ -42264,17 +41693,50 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_expor
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/List");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, BlogComponent;
+  var XNode, Block, StylerSets, styled, stylerVars, BlogComponent;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_Block) {
       Block = _Block.Block;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+        display: block;
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        &:not([data-ready]):before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding: ${stylerVars.sizeDefault};
+            border-radius: ${stylerVars.sizeDefault};
+            content: "Loading Component ...";
+        }
+    `.expand("[styler-layout=component]"));
       _export("BlogComponent", BlogComponent = Block({
         className: "fad fa-blog",
         title: "Add Blog Component",
@@ -42292,10 +41754,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_expor
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Components");
-System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
-  var XNode, Block, defaultImageSrc, ImageLink, LinkButton, LinkIconButton;
+  var XNode, Block, defaultImageSrc, StylerSets, styled, stylerVars, ImageLink, LinkButton, LinkIconButton;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -42303,8 +41765,24 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
       Block = _Block.Block;
     }, function (_defaultImage) {
       defaultImageSrc = _defaultImage.defaultImageSrc;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
     }],
     execute: function () {
+      StylerSets.register("low", styled.css`
+        border: solid 1px transparent;
+        outline: none;
+        text-decoration: none;
+        display: flex;
+        &:hover {
+            border-color: green;
+            text-decoration: underline;
+        }
+    `.expand("[styler-element=image-link]"));
       _export("ImageLink", ImageLink = Block({
         className: "fad fa-images",
         title: "Add Photo with Link",
@@ -42315,6 +41793,25 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
           src: defaultImageSrc
         }))
       }));
+      StylerSets.register("low", styled.css`
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: ${stylerVars.sizeDefault};
+    padding-top: ${stylerVars.sizeTiny};
+    padding-bottom: ${stylerVars.sizeTiny};
+    padding-left: ${stylerVars.sizeLarge};
+    padding-right: ${stylerVars.sizeLarge};
+    background: ${stylerVars.buttonBackground};
+    color: ${stylerVars.buttonText};
+    border: none;
+    border-radius: ${stylerVars.sizeLarge};
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+    `.expand("[styler-element=link-button]"));
       _export("LinkButton", LinkButton = Block({
         className: "fad fa-link-simple",
         title: "Add Link Button",
@@ -42323,6 +41820,24 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
           "styler-element": "link-button"
         }, "Button")
       }));
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${stylerVars.sizeDefault};
+    padding-top: ${stylerVars.sizeTiny};
+    padding-bottom: ${stylerVars.sizeTiny};
+    padding-left: ${stylerVars.sizeLarge};
+    padding-right: ${stylerVars.sizeLarge};
+    background: ${stylerVars.buttonBackground};
+    color: ${stylerVars.buttonText};
+    border: none;
+    border-radius: ${stylerVars.sizeLarge};
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+`.expand("[styler-element=link-icon-button]"));
       _export("LinkIconButton", LinkIconButton = Block({
         className: "fad fa-symbols",
         title: "Add Link Button",
@@ -42340,10 +41855,256 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage"]
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Buttons");
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/controls/AtomControl", "../drag-drop/DragDropHelper", "../toolbars/UndoRedoToolbar", "../blocks/WrapGrid", "../toolbars/EditorToolbar", "../properties/Properties", "../styler/StylerSet", "./SelectedElement", "@web-atoms/core/dist/core/AtomBinder", "../styler/Styler", "../blocks/ImageBox", "../blocks/RowBox", "../blocks/ColumnBox", "../blocks/VerticalImageBox", "../blocks/Image", "../blocks/ImageCard", "../blocks/TextBox", "../blocks/Card", "../blocks/List", "../blocks/Components", "@web-atoms/core/dist/core/types", "../blocks/Buttons"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-2.png", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
+  "use strict";
+  var XNode, Block, column2, StylerSets, styled, stylerVars, Columns2;
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_Block) {
+      Block = _Block.Block;
+    }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn2Png) {
+      column2 = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn2Png.default;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
+    }],
+    execute: function () {
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    contain: content;
+    @media (min-width: 600px) {
+        & {
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+        & > * {
+            width: 50%;
+            max-width: 50%;
+        }
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=columns-2]"));
+      _export("Columns2", Columns2 = Block({
+        title: "Add 2 Columns",
+        src: column2,
+        factory: () => XNode.create("section", {
+          "styler-layout": "columns-2"
+        }, XNode.create("section", null), XNode.create("section", null))
+      }));
+    }
+  };
+});
+//# sourceMappingURL=Columns2.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Columns2");
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@social-mail/social-mail-client/content/images/svg/html-editor/layouts/column-3.png", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
+  "use strict";
+  var XNode, Block, column3, StylerSets, styled, stylerVars, Columns3;
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_Block) {
+      Block = _Block.Block;
+    }, function (_socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn3Png) {
+      column3 = _socialMailSocialMailClientContentImagesSvgHtmlEditorLayoutsColumn3Png.default;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
+    }],
+    execute: function () {
+      StylerSets.register("low", styled.css`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    contain: content;
+    @media (min-width: 600px) {
+        & {
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+        & > * {
+            width: 33%;
+            max-width: 33%;
+        }
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=columns-3]"));
+      _export("Columns3", Columns3 = Block({
+        title: "Add 3 Columns",
+        src: column3,
+        factory: () => XNode.create("section", {
+          "styler-layout": "columns-3"
+        }, XNode.create("section", null), XNode.create("section", null), XNode.create("section", null))
+      }));
+    }
+  };
+});
+//# sourceMappingURL=Columns3.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Columns3");
+System.register(["@web-atoms/core/dist/core/XNode", "./Block", "./defaultImage", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
+  "use strict";
+  var XNode, Block, defaultImageSrc, StylerSets, styled, stylerVars, RightImageBox;
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_Block) {
+      Block = _Block.Block;
+    }, function (_defaultImage) {
+      defaultImageSrc = _defaultImage.defaultImageSrc;
+    }, function (_stylerStylerSets) {
+      StylerSets = _stylerStylerSets.StylerSets;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_stylerStyler) {
+      stylerVars = _stylerStyler.stylerVars;
+    }],
+    execute: function () {
+      StylerSets.register("low", styled.css`
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    margin: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    justify-items: center;
+    align-items: stretch;
+    contain: content;
+    & > * {
+        padding: ${stylerVars.sizeDefault};
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+    @media (min-width: 600px) {
+        & {
+            flex-direction: row-reverse;
+        }
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 50%;
+            max-width: 50%;
+        }
+    }
+    & > img {
+        align-self: center;
+        border-radius: ${stylerVars.sizeLarge}
+    }
+    & > section {
+        & > h4[styler-element=accent] {
+            padding: ${stylerVars.sizeLarge};
+            border-radius: ${stylerVars.sizeLarge};
+        }
+    }
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+    }
+    `.expand("[styler-layout=right-image-box]"));
+      _export("RightImageBox", RightImageBox = Block({
+        className: "material-symbols-outlined",
+        title: "Add Image Box with Image on Right",
+        text: "\uf864",
+        factory: () => XNode.create("section", {
+          "styler-layout": "right-image-box"
+        }, XNode.create("img", {
+          src: defaultImageSrc
+        }), XNode.create("section", null, XNode.create("h4", {
+          "styler-element": "accent"
+        }, "Header"), XNode.create("div", null, XNode.create("p", null, "Content here..."))))
+      }));
+    }
+  };
+});
+//# sourceMappingURL=RightImageBox.js.map
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/RightImageBox");
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/controls/AtomControl", "../drag-drop/DragDropHelper", "../toolbars/UndoRedoToolbar", "../blocks/WrapGrid", "../toolbars/EditorToolbar", "../properties/Properties", "../styler/StylerSet", "./SelectedElement", "@web-atoms/core/dist/core/AtomBinder", "../styler/Styler", "../blocks/ImageBox", "../blocks/RowBox", "../blocks/ColumnBox", "../blocks/VerticalImageBox", "../blocks/Image", "../blocks/ImageCard", "../blocks/TextBox", "../blocks/Card", "../blocks/List", "../blocks/Components", "@web-atoms/core/dist/core/types", "../blocks/Buttons", "../blocks/Columns2", "../blocks/Columns3", "../blocks/RightImageBox", "@web-atoms/core/dist/web/core/AtomUI"], function (_export, _context) {
   "use strict";
-  var __awaiter, __decorate, __metadata, Bind, XNode, sleep, styled, Action, AtomControl, InstallDragDropHelper, UndoRedoToolbar, WrapGrid, EditorToolbar, Properties, StylerSet, SelectedElement, AtomBinder, StylerVariable, ImageBox, RightImageBox, RowBox, ColumnBox, Columns2, Columns3, VerticalImageBox, Image, ImageCard, TextBox, Card, List, BlogComponent, UMD, ImageLink, LinkButton, HtmlPageEditor, desktopWidth, tabletWidth, mobileWidth;
+  var __awaiter, __decorate, __metadata, Bind, XNode, sleep, styled, Action, AtomControl, InstallDragDropHelper, UndoRedoToolbar, WrapGrid, EditorToolbar, Properties, StylerSet, SelectedElement, AtomBinder, StylerVariable, ImageBox, RowBox, ColumnBox, VerticalImageBox, Image, ImageCard, TextBox, Card, List, BlogComponent, UMD, ImageLink, LinkButton, Columns2, Columns3, RightImageBox, descendentElementIterator, HtmlPageEditor, desktopWidth, tabletWidth, mobileWidth;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -42382,13 +42143,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       StylerVariable = _stylerStyler.StylerVariable;
     }, function (_blocksImageBox) {
       ImageBox = _blocksImageBox.ImageBox;
-      RightImageBox = _blocksImageBox.RightImageBox;
     }, function (_blocksRowBox) {
       RowBox = _blocksRowBox.RowBox;
     }, function (_blocksColumnBox) {
       ColumnBox = _blocksColumnBox.ColumnBox;
-      Columns2 = _blocksColumnBox.Columns2;
-      Columns3 = _blocksColumnBox.Columns3;
     }, function (_blocksVerticalImageBox) {
       VerticalImageBox = _blocksVerticalImageBox.VerticalImageBox;
     }, function (_blocksImage) {
@@ -42408,6 +42166,14 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
     }, function (_blocksButtons) {
       ImageLink = _blocksButtons.ImageLink;
       LinkButton = _blocksButtons.LinkButton;
+    }, function (_blocksColumns) {
+      Columns2 = _blocksColumns.Columns2;
+    }, function (_blocksColumns2) {
+      Columns3 = _blocksColumns2.Columns3;
+    }, function (_blocksRightImageBox) {
+      RightImageBox = _blocksRightImageBox.RightImageBox;
+    }, function (_webAtomsCoreDistWebCoreAtomUI) {
+      descendentElementIterator = _webAtomsCoreDistWebCoreAtomUI.descendentElementIterator;
     }],
     execute: function () {
       styled.css`
@@ -42795,6 +42561,11 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
         copyElement() {
           const current = this.selection.element;
           const copy = current.cloneNode(true);
+          for (const iterator of descendentElementIterator(copy)) {
+            if (iterator.id) {
+              iterator.id = `sm-${Date.now()}`;
+            }
+          }
           current.insertAdjacentElement("afterend", copy);
           this.commit();
         }