@getflip/swirl-components 0.3.0 → 0.4.0

package/dist/cjs/swirl-components.cjs.js

@@ -15,7 +15,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"flip-file-viewer.cjs\",[[1,\"flip-file-viewer\",{\"description\":[1],\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"type\":[1],\"typeUnsupportedMessage\":[1,\"type-unsupported-message\"],\"zoom\":[8],\"download\":[64],\"print\":[64]}]]],[\"flip-resource-list-file-item.cjs\",[[1,\"flip-resource-list-file-item\",{\"description\":[1],\"errorMessage\":[1,\"error-message\"],\"icon\":[1],\"label\":[1],\"loading\":[4],\"removable\":[4],\"removeButtonLabel\":[1,\"remove-button-label\"]}]]],[\"flip-text-input.cjs\",[[2,\"flip-text-input\",{\"autoComplete\":[1,\"auto-complete\"],\"autoFocus\":[4,\"auto-focus\"],\"autoSelect\":[4,\"auto-select\"],\"clearable\":[4],\"clearButtonLabel\":[1,\"clear-button-label\"],\"disabled\":[4],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"invalid\":[4],\"maxLength\":[2,\"max-length\"],\"max\":[2],\"min\":[2],\"mode\":[1],\"prefixLabel\":[1,\"prefix-label\"],\"required\":[4],\"rows\":[2],\"showCharacterCounter\":[4,\"show-character-counter\"],\"spellCheck\":[4,\"spell-check\"],\"suffixLabel\":[1,\"suffix-label\"],\"step\":[2],\"passwordToggleLabel\":[1,\"password-toggle-label\"],\"type\":[1],\"value\":[1537],\"showPassword\":[32]}]]],[\"flip-modal.cjs\",[[1,\"flip-modal\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"label\":[1],\"primaryActionLabel\":[1,\"primary-action-label\"],\"secondaryActionLabel\":[1,\"secondary-action-label\"],\"closing\":[32],\"scrolled\":[32],\"open\":[64],\"close\":[64]},[[9,\"resize\",\"onWindowResize\"]]]]],[\"flip-date-input.cjs\",[[2,\"flip-date-input\",{\"autoFocus\":[4,\"auto-focus\"],\"autoSelect\":[4,\"auto-select\"],\"datePickerLabel\":[1,\"date-picker-label\"],\"disabled\":[4],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"format\":[1],\"invalid\":[4],\"locale\":[16],\"placeholder\":[1],\"required\":[4],\"value\":[1537]}]]],[\"flip-dialog.cjs\",[[1,\"flip-dialog\",{\"hideLabel\":[4,\"hide-label\"],\"intent\":[1],\"label\":[1],\"primaryActionLabel\":[1,\"primary-action-label\"],\"secondaryActionLabel\":[1,\"secondary-action-label\"],\"closing\":[32],\"open\":[64],\"close\":[64]}]]],[\"flip-pagination.cjs\",[[1,\"flip-pagination\",{\"accessibleNextButtonLabel\":[1,\"accessible-next-button-label\"],\"accessiblePrevButtonLabel\":[1,\"accessible-prev-button-label\"],\"nextButtonLabel\":[1,\"next-button-label\"],\"pageLabel\":[1,\"page-label\"],\"prevButtonLabel\":[1,\"prev-button-label\"],\"label\":[1],\"page\":[2],\"pages\":[2],\"pageSelectLabel\":[1,\"page-select-label\"],\"variant\":[1]}]]],[\"flip-toast-provider.cjs\",[[1,\"flip-toast-provider\",{\"globalDuration\":[2,\"global-duration\"],\"toasts\":[32],\"clearAll\":[64],\"dismiss\":[64],\"toast\":[64]}]]],[\"flip-checkbox.cjs\",[[2,\"flip-checkbox\",{\"checked\":[1032],\"description\":[1],\"disabled\":[4],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"invalid\":[4],\"label\":[1],\"value\":[1]}]]],[\"flip-empty-state.cjs\",[[1,\"flip-empty-state\",{\"heading\":[1],\"illustration\":[1]}]]],[\"flip-file-uploader.cjs\",[[2,\"flip-file-uploader\",{\"accept\":[1],\"ctaLabel\":[1,\"cta-label\"],\"description\":[1],\"disabled\":[4],\"dragDropLabel\":[1,\"drag-drop-label\"],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"label\":[1],\"multiple\":[4],\"showDropzone\":[4,\"show-dropzone\"],\"uploadButtonLabel\":[1,\"upload-button-label\"],\"reset\":[64]}]]],[\"flip-form-control.cjs\",[[6,\"flip-form-control\",{\"description\":[1],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"invalid\":[4],\"label\":[1],\"hasFocus\":[32],\"inputValue\":[32]},[[8,\"click\",\"onWindowClick\"]]]]],[\"flip-option-list-item.cjs\",[[1,\"flip-option-list-item\",{\"context\":[1025],\"disabled\":[4],\"icon\":[1],\"label\":[1],\"selected\":[1028],\"value\":[1]}]]],[\"flip-resource-list-item.cjs\",[[1,\"flip-resource-list-item\",{\"checked\":[1028],\"description\":[1],\"disabled\":[4],\"hideDivider\":[4,\"hide-divider\"],\"href\":[1],\"label\":[1],\"media\":[1],\"menuTriggerId\":[1,\"menu-trigger-id\"],\"menuTriggerLabel\":[1,\"menu-trigger-label\"],\"meta\":[1],\"selectable\":[4],\"value\":[1]}]]],[\"flip-search.cjs\",[[2,\"flip-search\",{\"autoFocus\":[4,\"auto-focus\"],\"clearButtonLabel\":[1,\"clear-button-label\"],\"disabled\":[4],\"inputName\":[1,\"input-name\"],\"inputId\":[1,\"input-id\"],\"label\":[1],\"placeholder\":[1],\"value\":[1025]},[[8,\"keydown\",\"onKeyDown\"]]]]],[\"flip-avatar.cjs\",[[1,\"flip-avatar\",{\"badge\":[1],\"badgePosition\":[1,\"badge-position\"],\"icon\":[1],\"initials\":[1],\"interactive\":[4],\"label\":[1],\"showLabel\":[4,\"show-label\"],\"size\":[1],\"src\":[1],\"variant\":[1],\"imageAvailable\":[32]}]]],[\"flip-banner.cjs\",[[1,\"flip-banner\",{\"actionLabel\":[1,\"action-label\"],\"content\":[1],\"dismissable\":[4],\"dismissLabel\":[1,\"dismiss-label\"],\"importance\":[1],\"intent\":[1],\"showIcon\":[4,\"show-icon\"]}]]],[\"flip-radio.cjs\",[[2,\"flip-radio\",{\"checked\":[1032],\"description\":[1],\"disabled\":[4],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"invalid\":[4],\"label\":[1],\"value\":[1]}]]],[\"flip-resource-list.cjs\",[[1,\"flip-resource-list\",{\"label\":[1]}]]],[\"flip-switch.cjs\",[[2,\"flip-switch\",{\"checked\":[1028],\"disabled\":[4],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"label\":[1],\"size\":[1],\"value\":[1]},[[9,\"pointerup\",\"onWindowPointerUp\"]]]]],[\"flip-tag.cjs\",[[1,\"flip-tag\",{\"intent\":[1],\"label\":[1],\"removable\":[4],\"removalButtonLabel\":[1,\"removal-button-label\"]}]]],[\"flip-video-thumbnail.cjs\",[[1,\"flip-video-thumbnail\",{\"durationLabel\":[1,\"duration-label\"],\"duration\":[1],\"label\":[1],\"src\":[1]}]]],[\"flip-action-list.cjs\",[[1,\"flip-action-list\"]]],[\"flip-action-list-item.cjs\",[[1,\"flip-action-list-item\",{\"disabled\":[4],\"description\":[1],\"icon\":[1],\"intent\":[1],\"label\":[1],\"size\":[1],\"suffix\":[1]}]]],[\"flip-action-list-section.cjs\",[[1,\"flip-action-list-section\",{\"label\":[1]}]]],[\"flip-avatar-group.cjs\",[[1,\"flip-avatar-group\",{\"badge\":[1]}]]],[\"flip-badge.cjs\",[[1,\"flip-badge\",{\"icon\":[1],\"intent\":[1],\"label\":[1],\"size\":[1],\"variant\":[1]}]]],[\"flip-chip.cjs\",[[1,\"flip-chip\",{\"avatar\":[1],\"icon\":[1],\"intent\":[1],\"interactive\":[4],\"label\":[1]}]]],[\"flip-description-list.cjs\",[[1,\"flip-description-list\"]]],[\"flip-description-list-item.cjs\",[[1,\"flip-description-list-item\",{\"term\":[1]}]]],[\"flip-form-group.cjs\",[[6,\"flip-form-group\",{\"orientation\":[1]}]]],[\"flip-icon-add.cjs\",[[1,\"flip-icon-add\",{\"size\":[2]}]]],[\"flip-icon-add-photo.cjs\",[[1,\"flip-icon-add-photo\",{\"size\":[2]}]]],[\"flip-icon-admin-panel-settings.cjs\",[[1,\"flip-icon-admin-panel-settings\",{\"size\":[2]}]]],[\"flip-icon-arrow-back.cjs\",[[1,\"flip-icon-arrow-back\",{\"size\":[2]}]]],[\"flip-icon-arrow-forward.cjs\",[[1,\"flip-icon-arrow-forward\",{\"size\":[2]}]]],[\"flip-icon-arrow-left.cjs\",[[1,\"flip-icon-arrow-left\",{\"size\":[2]}]]],[\"flip-icon-arrow-right.cjs\",[[1,\"flip-icon-arrow-right\",{\"size\":[2]}]]],[\"flip-icon-arrow-right-small.cjs\",[[1,\"flip-icon-arrow-right-small\",{\"size\":[2]}]]],[\"flip-icon-attachment.cjs\",[[1,\"flip-icon-attachment\",{\"size\":[2]}]]],[\"flip-icon-chat-bubble.cjs\",[[1,\"flip-icon-chat-bubble\",{\"size\":[2]}]]],[\"flip-icon-check.cjs\",[[1,\"flip-icon-check\",{\"size\":[2]}]]],[\"flip-icon-check-circle.cjs\",[[1,\"flip-icon-check-circle\",{\"size\":[2]}]]],[\"flip-icon-chevron-left.cjs\",[[1,\"flip-icon-chevron-left\",{\"size\":[2]}]]],[\"flip-icon-chevron-right.cjs\",[[1,\"flip-icon-chevron-right\",{\"size\":[2]}]]],[\"flip-icon-close-small.cjs\",[[1,\"flip-icon-close-small\",{\"size\":[2]}]]],[\"flip-icon-comment.cjs\",[[1,\"flip-icon-comment\",{\"size\":[2]}]]],[\"flip-icon-copy.cjs\",[[1,\"flip-icon-copy\",{\"size\":[2]}]]],[\"flip-icon-date-range.cjs\",[[1,\"flip-icon-date-range\",{\"size\":[2]}]]],[\"flip-icon-delete.cjs\",[[1,\"flip-icon-delete\",{\"size\":[2]}]]],[\"flip-icon-description.cjs\",[[1,\"flip-icon-description\",{\"size\":[2]}]]],[\"flip-icon-download.cjs\",[[1,\"flip-icon-download\",{\"size\":[2]}]]],[\"flip-icon-edit.cjs\",[[1,\"flip-icon-edit\",{\"size\":[2]}]]],[\"flip-icon-emoji-mood.cjs\",[[1,\"flip-icon-emoji-mood\",{\"size\":[2]}]]],[\"flip-icon-emoji-satisfied.cjs\",[[1,\"flip-icon-emoji-satisfied\",{\"size\":[2]}]]],[\"flip-icon-file.cjs\",[[1,\"flip-icon-file\",{\"size\":[2]}]]],[\"flip-icon-folder-shared.cjs\",[[1,\"flip-icon-folder-shared\",{\"size\":[2]}]]],[\"flip-icon-fullscreen.cjs\",[[1,\"flip-icon-fullscreen\",{\"size\":[2]}]]],[\"flip-icon-fullscreen-exit.cjs\",[[1,\"flip-icon-fullscreen-exit\",{\"size\":[2]}]]],[\"flip-icon-group-assign.cjs\",[[1,\"flip-icon-group-assign\",{\"size\":[2]}]]],[\"flip-icon-groups.cjs\",[[1,\"flip-icon-groups\",{\"size\":[2]}]]],[\"flip-icon-groups-custom.cjs\",[[1,\"flip-icon-groups-custom\",{\"size\":[2]}]]],[\"flip-icon-image.cjs\",[[1,\"flip-icon-image\",{\"size\":[2]}]]],[\"flip-icon-info.cjs\",[[1,\"flip-icon-info\",{\"size\":[2]}]]],[\"flip-icon-inventory.cjs\",[[1,\"flip-icon-inventory\",{\"size\":[2]}]]],[\"flip-icon-like.cjs\",[[1,\"flip-icon-like\",{\"size\":[2]}]]],[\"flip-icon-link.cjs\",[[1,\"flip-icon-link\",{\"size\":[2]}]]],[\"flip-icon-lock.cjs\",[[1,\"flip-icon-lock\",{\"size\":[2]}]]],[\"flip-icon-logout.cjs\",[[1,\"flip-icon-logout\",{\"size\":[2]}]]],[\"flip-icon-mail.cjs\",[[1,\"flip-icon-mail\",{\"size\":[2]}]]],[\"flip-icon-manage-accounts.cjs\",[[1,\"flip-icon-manage-accounts\",{\"size\":[2]}]]],[\"flip-icon-mention.cjs\",[[1,\"flip-icon-mention\",{\"size\":[2]}]]],[\"flip-icon-message.cjs\",[[1,\"flip-icon-message\",{\"size\":[2]}]]],[\"flip-icon-more-horizontal.cjs\",[[1,\"flip-icon-more-horizontal\",{\"size\":[2]}]]],[\"flip-icon-more-vertikal.cjs\",[[1,\"flip-icon-more-vertikal\",{\"size\":[2]}]]],[\"flip-icon-notifications.cjs\",[[1,\"flip-icon-notifications\",{\"size\":[2]}]]],[\"flip-icon-notifications-active.cjs\",[[1,\"flip-icon-notifications-active\",{\"size\":[2]}]]],[\"flip-icon-notifications-off.cjs\",[[1,\"flip-icon-notifications-off\",{\"size\":[2]}]]],[\"flip-icon-open-in-new.cjs\",[[1,\"flip-icon-open-in-new\",{\"size\":[2]}]]],[\"flip-icon-people-alt.cjs\",[[1,\"flip-icon-people-alt\",{\"size\":[2]}]]],[\"flip-icon-person-off.cjs\",[[1,\"flip-icon-person-off\",{\"size\":[2]}]]],[\"flip-icon-phone.cjs\",[[1,\"flip-icon-phone\",{\"size\":[2]}]]],[\"flip-icon-poll.cjs\",[[1,\"flip-icon-poll\",{\"size\":[2]}]]],[\"flip-icon-print.cjs\",[[1,\"flip-icon-print\",{\"size\":[2]}]]],[\"flip-icon-recieved.cjs\",[[1,\"flip-icon-recieved\",{\"size\":[2]}]]],[\"flip-icon-remove.cjs\",[[1,\"flip-icon-remove\",{\"size\":[2]}]]],[\"flip-icon-search-strong.cjs\",[[1,\"flip-icon-search-strong\",{\"size\":[2]}]]],[\"flip-icon-send.cjs\",[[1,\"flip-icon-send\",{\"size\":[2]}]]],[\"flip-icon-settings.cjs\",[[1,\"flip-icon-settings\",{\"size\":[2]}]]],[\"flip-icon-time-filled.cjs\",[[1,\"flip-icon-time-filled\",{\"size\":[2]}]]],[\"flip-icon-time-outlined.cjs\",[[1,\"flip-icon-time-outlined\",{\"size\":[2]}]]],[\"flip-icon-user-assign.cjs\",[[1,\"flip-icon-user-assign\",{\"size\":[2]}]]],[\"flip-icon-video-camera.cjs\",[[1,\"flip-icon-video-camera\",{\"size\":[2]}]]],[\"flip-icon-warning.cjs\",[[1,\"flip-icon-warning\",{\"size\":[2]}]]],[\"flip-link.cjs\",[[1,\"flip-link\",{\"href\":[1],\"label\":[1],\"target\":[1]}]]],[\"flip-list.cjs\",[[4,\"flip-list\"]]],[\"flip-option-list.cjs\",[[1,\"flip-option-list\",{\"disabled\":[4],\"label\":[1],\"multiSelect\":[4,\"multi-select\"],\"value\":[1040]}]]],[\"flip-option-list-section.cjs\",[[1,\"flip-option-list-section\",{\"label\":[1]}]]],[\"flip-progress-indicator.cjs\",[[1,\"flip-progress-indicator\",{\"label\":[1],\"size\":[1],\"value\":[2],\"variant\":[1]}]]],[\"flip-radio-group.cjs\",[[6,\"flip-radio-group\",{\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"value\":[1537]}]]],[\"flip-tab.cjs\",[[1,\"flip-tab\",{\"active\":[4],\"label\":[1],\"tabId\":[1,\"tab-id\"]}]]],[\"flip-tabs.cjs\",[[6,\"flip-tabs\",{\"initialTab\":[1,\"initial-tab\"],\"label\":[1],\"activeTab\":[32],\"highlightedTab\":[32],\"activateTab\":[64]},[[9,\"resize\",\"onWindowResize\"]]]]],[\"flip-theme-provider.cjs\",[[6,\"flip-theme-provider\",{\"config\":[16],\"getActiveTheme\":[64],\"getPreferredTheme\":[64],\"setPreferredTheme\":[64],\"resetPreferredTheme\":[64]}]]],[\"flip-thumbnail.cjs\",[[1,\"flip-thumbnail\",{\"alt\":[1],\"format\":[1],\"size\":[1],\"src\":[1]}]]],[\"flip-tooltip.cjs\",[[1,\"flip-tooltip\",{\"content\":[1],\"delay\":[2],\"position\":[1],\"actualPosition\":[32],\"visible\":[32]},[[1,\"mouseenter\",\"onMouseEnter\"],[1,\"mouseleave\",\"onMouseLeave\"],[9,\"resize\",\"onWindowResize\"],[9,\"scroll\",\"onWindowScroll\"]]]]],[\"flip-icon-close.cjs\",[[1,\"flip-icon-close\",{\"size\":[2]}]]],[\"flip-toast.cjs\",[[1,\"flip-toast\",{\"accessibleDismissLabel\":[1,\"accessible-dismiss-label\"],\"content\":[1],\"dismissLabel\":[1,\"dismiss-label\"],\"duration\":[2],\"icon\":[1],\"intent\":[1],\"toastId\":[1,\"toast-id\"]}]]],[\"flip-icon-check-small.cjs\",[[1,\"flip-icon-check-small\",{\"size\":[2]}]]],[\"flip-icon-cloud-upload.cjs\",[[1,\"flip-icon-cloud-upload\",{\"size\":[2]}]]],[\"flip-icon-person.cjs\",[[1,\"flip-icon-person\",{\"size\":[2]}]]],[\"flip-icon-search.cjs\",[[1,\"flip-icon-search\",{\"size\":[2]}]]],[\"flip-text.cjs\",[[1,\"flip-text\",{\"align\":[1],\"as\":[1],\"color\":[1],\"fontStyle\":[1,\"font-style\"],\"size\":[1],\"weight\":[1]}]]],[\"flip-button-group.cjs\",[[1,\"flip-button-group\",{\"orientation\":[1],\"stretch\":[4],\"wrap\":[4]}]]],[\"flip-heading.cjs\",[[1,\"flip-heading\",{\"align\":[1],\"as\":[1],\"headingId\":[1,\"heading-id\"],\"level\":[2],\"text\":[1]}]]],[\"flip-icon-cancel.cjs\",[[1,\"flip-icon-cancel\",{\"size\":[2]}]]],[\"flip-icon-expand-more.cjs\",[[1,\"flip-icon-expand-more\",{\"size\":[2]}]]],[\"flip-date-picker_3.cjs\",[[1,\"flip-date-picker\",{\"locale\":[16],\"maxDate\":[16],\"minDate\":[16],\"range\":[4],\"startDate\":[16],\"value\":[1040]}],[1,\"flip-icon-today\",{\"size\":[2]}],[1,\"flip-popover\",{\"label\":[1],\"placement\":[1],\"popoverId\":[1,\"popover-id\"],\"trigger\":[1],\"active\":[32],\"closing\":[32],\"position\":[32],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClick\"]]]]],[\"flip-icon-expand-less_3.cjs\",[[1,\"flip-icon-expand-less\",{\"size\":[2]}],[1,\"flip-icon-visibility\",{\"size\":[2]}],[1,\"flip-icon-visibility-off\",{\"size\":[2]}]]],[\"flip-icon-check-strong.cjs\",[[1,\"flip-icon-check-strong\",{\"size\":[2]}]]],[\"flip-stack.cjs\",[[1,\"flip-stack\",{\"align\":[1],\"as\":[1],\"justify\":[1],\"orientation\":[1],\"spacing\":[1],\"wrap\":[4]}]]],[\"flip-visually-hidden.cjs\",[[1,\"flip-visually-hidden\"]]],[\"flip-file-viewer-audio_6.cjs\",[[1,\"flip-file-viewer-csv\",{\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"data\":[32],\"error\":[32],\"loading\":[32]}],[1,\"flip-file-viewer-image\",{\"description\":[1],\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"error\":[32],\"loading\":[32]}],[1,\"flip-file-viewer-pdf\",{\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"zoom\":[8],\"doc\":[32],\"error\":[32],\"loading\":[32],\"visiblePages\":[32],\"print\":[64]},[[9,\"resize\",\"onWindowResize\"]]],[1,\"flip-file-viewer-text\",{\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"error\":[32],\"loading\":[32],\"text\":[32]}],[1,\"flip-file-viewer-audio\",{\"file\":[1],\"type\":[1]}],[1,\"flip-file-viewer-video\",{\"file\":[1],\"type\":[1]}]]],[\"flip-button.cjs\",[[2,\"flip-button\",{\"disabled\":[4],\"download\":[1],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"flipAriaLabel\":[1,\"flip-aria-label\"],\"form\":[1],\"hideLabel\":[4,\"hide-label\"],\"href\":[1],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"],\"intent\":[1],\"label\":[1],\"name\":[1],\"size\":[1],\"target\":[1],\"type\":[1],\"value\":[1],\"variant\":[1]}]]],[\"flip-icon-error_3.cjs\",[[1,\"flip-spinner\",{\"label\":[1],\"size\":[1]}],[1,\"flip-inline-error\",{\"message\":[1],\"size\":[1]}],[1,\"flip-icon-error\",{\"size\":[2]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"flip-file-viewer.cjs\",[[1,\"flip-file-viewer\",{\"active\":[4],\"description\":[1],\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"type\":[1],\"typeUnsupportedMessage\":[1,\"type-unsupported-message\"],\"zoom\":[8],\"download\":[64],\"print\":[64]}]]],[\"flip-resource-list-file-item.cjs\",[[1,\"flip-resource-list-file-item\",{\"description\":[1],\"errorMessage\":[1,\"error-message\"],\"icon\":[1],\"label\":[1],\"loading\":[4],\"removable\":[4],\"removeButtonLabel\":[1,\"remove-button-label\"]}]]],[\"flip-text-input.cjs\",[[2,\"flip-text-input\",{\"autoComplete\":[1,\"auto-complete\"],\"autoFocus\":[4,\"auto-focus\"],\"autoSelect\":[4,\"auto-select\"],\"clearable\":[4],\"clearButtonLabel\":[1,\"clear-button-label\"],\"disabled\":[4],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"invalid\":[4],\"maxLength\":[2,\"max-length\"],\"max\":[2],\"min\":[2],\"mode\":[1],\"prefixLabel\":[1,\"prefix-label\"],\"required\":[4],\"rows\":[2],\"showCharacterCounter\":[4,\"show-character-counter\"],\"spellCheck\":[4,\"spell-check\"],\"suffixLabel\":[1,\"suffix-label\"],\"step\":[2],\"passwordToggleLabel\":[1,\"password-toggle-label\"],\"type\":[1],\"value\":[1537],\"showPassword\":[32]}]]],[\"flip-lightbox.cjs\",[[1,\"flip-lightbox\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"downloadButtonLabel\":[1,\"download-button-label\"],\"label\":[1],\"nextSlideButtonLabel\":[1,\"next-slide-button-label\"],\"previousSlideButtonLabel\":[1,\"previous-slide-button-label\"],\"activeSlideIndex\":[32],\"closing\":[32],\"slides\":[32],\"open\":[64],\"close\":[64],\"activateSlide\":[64]}]]],[\"flip-modal.cjs\",[[1,\"flip-modal\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"label\":[1],\"primaryActionLabel\":[1,\"primary-action-label\"],\"secondaryActionLabel\":[1,\"secondary-action-label\"],\"closing\":[32],\"scrollable\":[32],\"scrolled\":[32],\"scrolledDown\":[32],\"open\":[64],\"close\":[64]},[[9,\"resize\",\"onWindowResize\"]]]]],[\"flip-date-input.cjs\",[[2,\"flip-date-input\",{\"autoFocus\":[4,\"auto-focus\"],\"autoSelect\":[4,\"auto-select\"],\"datePickerLabel\":[1,\"date-picker-label\"],\"disabled\":[4],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"format\":[1],\"invalid\":[4],\"locale\":[16],\"placeholder\":[1],\"required\":[4],\"value\":[1537]}]]],[\"flip-dialog.cjs\",[[1,\"flip-dialog\",{\"hideLabel\":[4,\"hide-label\"],\"intent\":[1],\"label\":[1],\"primaryActionLabel\":[1,\"primary-action-label\"],\"secondaryActionLabel\":[1,\"secondary-action-label\"],\"closing\":[32],\"open\":[64],\"close\":[64]}]]],[\"flip-pagination.cjs\",[[1,\"flip-pagination\",{\"accessibleNextButtonLabel\":[1,\"accessible-next-button-label\"],\"accessiblePrevButtonLabel\":[1,\"accessible-prev-button-label\"],\"nextButtonLabel\":[1,\"next-button-label\"],\"pageLabel\":[1,\"page-label\"],\"prevButtonLabel\":[1,\"prev-button-label\"],\"label\":[1],\"page\":[2],\"pages\":[2],\"pageSelectLabel\":[1,\"page-select-label\"],\"variant\":[1]}]]],[\"flip-toast-provider.cjs\",[[1,\"flip-toast-provider\",{\"globalDuration\":[2,\"global-duration\"],\"toasts\":[32],\"clearAll\":[64],\"dismiss\":[64],\"toast\":[64]}]]],[\"flip-checkbox.cjs\",[[2,\"flip-checkbox\",{\"checked\":[1032],\"description\":[1],\"disabled\":[4],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"invalid\":[4],\"label\":[1],\"value\":[1]}]]],[\"flip-empty-state.cjs\",[[1,\"flip-empty-state\",{\"heading\":[1],\"illustration\":[1]}]]],[\"flip-file-uploader.cjs\",[[2,\"flip-file-uploader\",{\"accept\":[1],\"ctaLabel\":[1,\"cta-label\"],\"description\":[1],\"disabled\":[4],\"dragDropLabel\":[1,\"drag-drop-label\"],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"label\":[1],\"multiple\":[4],\"showDropzone\":[4,\"show-dropzone\"],\"uploadButtonLabel\":[1,\"upload-button-label\"],\"reset\":[64]}]]],[\"flip-form-control.cjs\",[[6,\"flip-form-control\",{\"description\":[1],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"invalid\":[4],\"label\":[1],\"hasFocus\":[32],\"inputValue\":[32]},[[8,\"click\",\"onWindowClick\"]]]]],[\"flip-option-list-item.cjs\",[[1,\"flip-option-list-item\",{\"context\":[1025],\"disabled\":[4],\"icon\":[1],\"label\":[1],\"selected\":[1028],\"value\":[1]}]]],[\"flip-resource-list-item.cjs\",[[1,\"flip-resource-list-item\",{\"checked\":[1028],\"description\":[1],\"disabled\":[4],\"hideDivider\":[4,\"hide-divider\"],\"href\":[1],\"label\":[1],\"media\":[1],\"menuTriggerId\":[1,\"menu-trigger-id\"],\"menuTriggerLabel\":[1,\"menu-trigger-label\"],\"meta\":[1],\"selectable\":[4],\"value\":[1]}]]],[\"flip-search.cjs\",[[2,\"flip-search\",{\"autoFocus\":[4,\"auto-focus\"],\"clearButtonLabel\":[1,\"clear-button-label\"],\"disabled\":[4],\"inputName\":[1,\"input-name\"],\"inputId\":[1,\"input-id\"],\"label\":[1],\"placeholder\":[1],\"value\":[1025]},[[8,\"keydown\",\"onKeyDown\"]]]]],[\"flip-avatar.cjs\",[[1,\"flip-avatar\",{\"badge\":[1],\"badgePosition\":[1,\"badge-position\"],\"icon\":[1],\"initials\":[1],\"interactive\":[4],\"label\":[1],\"showLabel\":[4,\"show-label\"],\"size\":[1],\"src\":[1],\"variant\":[1],\"imageAvailable\":[32]}]]],[\"flip-banner.cjs\",[[1,\"flip-banner\",{\"actionLabel\":[1,\"action-label\"],\"content\":[1],\"dismissable\":[4],\"dismissLabel\":[1,\"dismiss-label\"],\"importance\":[1],\"intent\":[1],\"showIcon\":[4,\"show-icon\"]}]]],[\"flip-radio.cjs\",[[2,\"flip-radio\",{\"checked\":[1032],\"description\":[1],\"disabled\":[4],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"invalid\":[4],\"label\":[1],\"value\":[1]}]]],[\"flip-resource-list.cjs\",[[1,\"flip-resource-list\",{\"label\":[1]}]]],[\"flip-switch.cjs\",[[2,\"flip-switch\",{\"checked\":[1028],\"disabled\":[4],\"inputId\":[1,\"input-id\"],\"inputName\":[1,\"input-name\"],\"label\":[1],\"size\":[1],\"value\":[1]},[[9,\"pointerup\",\"onWindowPointerUp\"]]]]],[\"flip-tag.cjs\",[[1,\"flip-tag\",{\"intent\":[1],\"label\":[1],\"removable\":[4],\"removalButtonLabel\":[1,\"removal-button-label\"]}]]],[\"flip-video-thumbnail.cjs\",[[1,\"flip-video-thumbnail\",{\"durationLabel\":[1,\"duration-label\"],\"duration\":[1],\"label\":[1],\"src\":[1]}]]],[\"flip-action-list.cjs\",[[1,\"flip-action-list\"]]],[\"flip-action-list-item.cjs\",[[1,\"flip-action-list-item\",{\"disabled\":[4],\"description\":[1],\"icon\":[1],\"intent\":[1],\"label\":[1],\"size\":[1],\"suffix\":[1]}]]],[\"flip-action-list-section.cjs\",[[1,\"flip-action-list-section\",{\"label\":[1]}]]],[\"flip-avatar-group.cjs\",[[1,\"flip-avatar-group\",{\"badge\":[1]}]]],[\"flip-badge.cjs\",[[1,\"flip-badge\",{\"icon\":[1],\"intent\":[1],\"label\":[1],\"size\":[1],\"variant\":[1]}]]],[\"flip-chip.cjs\",[[1,\"flip-chip\",{\"avatar\":[1],\"icon\":[1],\"intent\":[1],\"interactive\":[4],\"label\":[1]}]]],[\"flip-description-list.cjs\",[[1,\"flip-description-list\"]]],[\"flip-description-list-item.cjs\",[[1,\"flip-description-list-item\",{\"term\":[1]}]]],[\"flip-form-group.cjs\",[[6,\"flip-form-group\",{\"orientation\":[1]}]]],[\"flip-icon-add.cjs\",[[1,\"flip-icon-add\",{\"size\":[2]}]]],[\"flip-icon-add-photo.cjs\",[[1,\"flip-icon-add-photo\",{\"size\":[2]}]]],[\"flip-icon-admin-panel-settings.cjs\",[[1,\"flip-icon-admin-panel-settings\",{\"size\":[2]}]]],[\"flip-icon-arrow-back.cjs\",[[1,\"flip-icon-arrow-back\",{\"size\":[2]}]]],[\"flip-icon-arrow-forward.cjs\",[[1,\"flip-icon-arrow-forward\",{\"size\":[2]}]]],[\"flip-icon-arrow-right-small.cjs\",[[1,\"flip-icon-arrow-right-small\",{\"size\":[2]}]]],[\"flip-icon-attachment.cjs\",[[1,\"flip-icon-attachment\",{\"size\":[2]}]]],[\"flip-icon-chat-bubble.cjs\",[[1,\"flip-icon-chat-bubble\",{\"size\":[2]}]]],[\"flip-icon-check.cjs\",[[1,\"flip-icon-check\",{\"size\":[2]}]]],[\"flip-icon-check-circle.cjs\",[[1,\"flip-icon-check-circle\",{\"size\":[2]}]]],[\"flip-icon-chevron-left.cjs\",[[1,\"flip-icon-chevron-left\",{\"size\":[2]}]]],[\"flip-icon-chevron-right.cjs\",[[1,\"flip-icon-chevron-right\",{\"size\":[2]}]]],[\"flip-icon-close-small.cjs\",[[1,\"flip-icon-close-small\",{\"size\":[2]}]]],[\"flip-icon-comment.cjs\",[[1,\"flip-icon-comment\",{\"size\":[2]}]]],[\"flip-icon-copy.cjs\",[[1,\"flip-icon-copy\",{\"size\":[2]}]]],[\"flip-icon-date-range.cjs\",[[1,\"flip-icon-date-range\",{\"size\":[2]}]]],[\"flip-icon-delete.cjs\",[[1,\"flip-icon-delete\",{\"size\":[2]}]]],[\"flip-icon-description.cjs\",[[1,\"flip-icon-description\",{\"size\":[2]}]]],[\"flip-icon-edit.cjs\",[[1,\"flip-icon-edit\",{\"size\":[2]}]]],[\"flip-icon-emoji-mood.cjs\",[[1,\"flip-icon-emoji-mood\",{\"size\":[2]}]]],[\"flip-icon-emoji-satisfied.cjs\",[[1,\"flip-icon-emoji-satisfied\",{\"size\":[2]}]]],[\"flip-icon-file.cjs\",[[1,\"flip-icon-file\",{\"size\":[2]}]]],[\"flip-icon-folder-shared.cjs\",[[1,\"flip-icon-folder-shared\",{\"size\":[2]}]]],[\"flip-icon-fullscreen.cjs\",[[1,\"flip-icon-fullscreen\",{\"size\":[2]}]]],[\"flip-icon-fullscreen-exit.cjs\",[[1,\"flip-icon-fullscreen-exit\",{\"size\":[2]}]]],[\"flip-icon-group-assign.cjs\",[[1,\"flip-icon-group-assign\",{\"size\":[2]}]]],[\"flip-icon-groups.cjs\",[[1,\"flip-icon-groups\",{\"size\":[2]}]]],[\"flip-icon-groups-custom.cjs\",[[1,\"flip-icon-groups-custom\",{\"size\":[2]}]]],[\"flip-icon-image.cjs\",[[1,\"flip-icon-image\",{\"size\":[2]}]]],[\"flip-icon-info.cjs\",[[1,\"flip-icon-info\",{\"size\":[2]}]]],[\"flip-icon-inventory.cjs\",[[1,\"flip-icon-inventory\",{\"size\":[2]}]]],[\"flip-icon-like.cjs\",[[1,\"flip-icon-like\",{\"size\":[2]}]]],[\"flip-icon-link.cjs\",[[1,\"flip-icon-link\",{\"size\":[2]}]]],[\"flip-icon-lock.cjs\",[[1,\"flip-icon-lock\",{\"size\":[2]}]]],[\"flip-icon-logout.cjs\",[[1,\"flip-icon-logout\",{\"size\":[2]}]]],[\"flip-icon-mail.cjs\",[[1,\"flip-icon-mail\",{\"size\":[2]}]]],[\"flip-icon-manage-accounts.cjs\",[[1,\"flip-icon-manage-accounts\",{\"size\":[2]}]]],[\"flip-icon-mention.cjs\",[[1,\"flip-icon-mention\",{\"size\":[2]}]]],[\"flip-icon-message.cjs\",[[1,\"flip-icon-message\",{\"size\":[2]}]]],[\"flip-icon-more-horizontal.cjs\",[[1,\"flip-icon-more-horizontal\",{\"size\":[2]}]]],[\"flip-icon-more-vertikal.cjs\",[[1,\"flip-icon-more-vertikal\",{\"size\":[2]}]]],[\"flip-icon-notifications.cjs\",[[1,\"flip-icon-notifications\",{\"size\":[2]}]]],[\"flip-icon-notifications-active.cjs\",[[1,\"flip-icon-notifications-active\",{\"size\":[2]}]]],[\"flip-icon-notifications-off.cjs\",[[1,\"flip-icon-notifications-off\",{\"size\":[2]}]]],[\"flip-icon-open-in-new.cjs\",[[1,\"flip-icon-open-in-new\",{\"size\":[2]}]]],[\"flip-icon-people-alt.cjs\",[[1,\"flip-icon-people-alt\",{\"size\":[2]}]]],[\"flip-icon-person-off.cjs\",[[1,\"flip-icon-person-off\",{\"size\":[2]}]]],[\"flip-icon-phone.cjs\",[[1,\"flip-icon-phone\",{\"size\":[2]}]]],[\"flip-icon-poll.cjs\",[[1,\"flip-icon-poll\",{\"size\":[2]}]]],[\"flip-icon-print.cjs\",[[1,\"flip-icon-print\",{\"size\":[2]}]]],[\"flip-icon-recieved.cjs\",[[1,\"flip-icon-recieved\",{\"size\":[2]}]]],[\"flip-icon-remove.cjs\",[[1,\"flip-icon-remove\",{\"size\":[2]}]]],[\"flip-icon-search-strong.cjs\",[[1,\"flip-icon-search-strong\",{\"size\":[2]}]]],[\"flip-icon-send.cjs\",[[1,\"flip-icon-send\",{\"size\":[2]}]]],[\"flip-icon-settings.cjs\",[[1,\"flip-icon-settings\",{\"size\":[2]}]]],[\"flip-icon-time-filled.cjs\",[[1,\"flip-icon-time-filled\",{\"size\":[2]}]]],[\"flip-icon-time-outlined.cjs\",[[1,\"flip-icon-time-outlined\",{\"size\":[2]}]]],[\"flip-icon-user-assign.cjs\",[[1,\"flip-icon-user-assign\",{\"size\":[2]}]]],[\"flip-icon-video-camera.cjs\",[[1,\"flip-icon-video-camera\",{\"size\":[2]}]]],[\"flip-icon-warning.cjs\",[[1,\"flip-icon-warning\",{\"size\":[2]}]]],[\"flip-link.cjs\",[[1,\"flip-link\",{\"href\":[1],\"label\":[1],\"target\":[1]}]]],[\"flip-list.cjs\",[[4,\"flip-list\"]]],[\"flip-option-list.cjs\",[[1,\"flip-option-list\",{\"disabled\":[4],\"label\":[1],\"multiSelect\":[4,\"multi-select\"],\"value\":[1040]}]]],[\"flip-option-list-section.cjs\",[[1,\"flip-option-list-section\",{\"label\":[1]}]]],[\"flip-progress-indicator.cjs\",[[1,\"flip-progress-indicator\",{\"label\":[1],\"size\":[1],\"value\":[2],\"variant\":[1]}]]],[\"flip-radio-group.cjs\",[[6,\"flip-radio-group\",{\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"value\":[1537]}]]],[\"flip-tab.cjs\",[[1,\"flip-tab\",{\"active\":[4],\"label\":[1],\"tabId\":[1,\"tab-id\"]}]]],[\"flip-tabs.cjs\",[[6,\"flip-tabs\",{\"initialTab\":[1,\"initial-tab\"],\"label\":[1],\"activeTab\":[32],\"activateTab\":[64]}]]],[\"flip-theme-provider.cjs\",[[6,\"flip-theme-provider\",{\"config\":[16],\"getActiveTheme\":[64],\"getPreferredTheme\":[64],\"setPreferredTheme\":[64],\"resetPreferredTheme\":[64]}]]],[\"flip-thumbnail.cjs\",[[1,\"flip-thumbnail\",{\"alt\":[1],\"format\":[1],\"size\":[1],\"src\":[1]}]]],[\"flip-tooltip.cjs\",[[1,\"flip-tooltip\",{\"content\":[1],\"delay\":[2],\"position\":[1],\"actualPosition\":[32],\"visible\":[32]},[[1,\"mouseenter\",\"onMouseEnter\"],[1,\"mouseleave\",\"onMouseLeave\"],[9,\"resize\",\"onWindowResize\"],[9,\"scroll\",\"onWindowScroll\"]]]]],[\"flip-toast.cjs\",[[1,\"flip-toast\",{\"accessibleDismissLabel\":[1,\"accessible-dismiss-label\"],\"content\":[1],\"dismissLabel\":[1,\"dismiss-label\"],\"duration\":[2],\"icon\":[1],\"intent\":[1],\"toastId\":[1,\"toast-id\"]}]]],[\"flip-icon-check-small.cjs\",[[1,\"flip-icon-check-small\",{\"size\":[2]}]]],[\"flip-icon-cloud-upload.cjs\",[[1,\"flip-icon-cloud-upload\",{\"size\":[2]}]]],[\"flip-icon-person.cjs\",[[1,\"flip-icon-person\",{\"size\":[2]}]]],[\"flip-icon-search.cjs\",[[1,\"flip-icon-search\",{\"size\":[2]}]]],[\"flip-text.cjs\",[[1,\"flip-text\",{\"align\":[1],\"as\":[1],\"color\":[1],\"fontStyle\":[1,\"font-style\"],\"size\":[1],\"weight\":[1]}]]],[\"flip-button-group.cjs\",[[1,\"flip-button-group\",{\"orientation\":[1],\"segmented\":[4],\"stretch\":[4],\"wrap\":[4]}]]],[\"flip-heading.cjs\",[[1,\"flip-heading\",{\"align\":[1],\"as\":[1],\"headingId\":[1,\"heading-id\"],\"level\":[2],\"text\":[1]}]]],[\"flip-icon-cancel.cjs\",[[1,\"flip-icon-cancel\",{\"size\":[2]}]]],[\"flip-icon-expand-more.cjs\",[[1,\"flip-icon-expand-more\",{\"size\":[2]}]]],[\"flip-date-picker_3.cjs\",[[1,\"flip-date-picker\",{\"locale\":[16],\"maxDate\":[16],\"minDate\":[16],\"range\":[4],\"startDate\":[16],\"value\":[1040]}],[1,\"flip-icon-today\",{\"size\":[2]}],[1,\"flip-popover\",{\"label\":[1],\"placement\":[1],\"popoverId\":[1,\"popover-id\"],\"trigger\":[1],\"active\":[32],\"closing\":[32],\"position\":[32],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClick\"]]]]],[\"flip-icon-arrow-left_3.cjs\",[[1,\"flip-icon-arrow-left\",{\"size\":[2]}],[1,\"flip-icon-arrow-right\",{\"size\":[2]}],[1,\"flip-icon-download\",{\"size\":[2]}]]],[\"flip-icon-expand-less_3.cjs\",[[1,\"flip-icon-expand-less\",{\"size\":[2]}],[1,\"flip-icon-visibility\",{\"size\":[2]}],[1,\"flip-icon-visibility-off\",{\"size\":[2]}]]],[\"flip-icon-check-strong.cjs\",[[1,\"flip-icon-check-strong\",{\"size\":[2]}]]],[\"flip-icon-close.cjs\",[[1,\"flip-icon-close\",{\"size\":[2]}]]],[\"flip-stack.cjs\",[[1,\"flip-stack\",{\"align\":[1],\"as\":[1],\"justify\":[1],\"orientation\":[1],\"spacing\":[1],\"wrap\":[4]}]]],[\"flip-visually-hidden.cjs\",[[1,\"flip-visually-hidden\"]]],[\"flip-file-viewer-audio_6.cjs\",[[1,\"flip-file-viewer-csv\",{\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"data\":[32],\"error\":[32],\"loading\":[32]}],[1,\"flip-file-viewer-image\",{\"description\":[1],\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"error\":[32],\"loading\":[32]}],[1,\"flip-file-viewer-pdf\",{\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"zoom\":[8],\"doc\":[32],\"error\":[32],\"loading\":[32],\"visiblePages\":[32],\"print\":[64]},[[9,\"resize\",\"onWindowResize\"]]],[1,\"flip-file-viewer-text\",{\"errorMessage\":[1,\"error-message\"],\"file\":[1],\"error\":[32],\"loading\":[32],\"text\":[32]}],[1,\"flip-file-viewer-audio\",{\"file\":[1],\"type\":[1]}],[1,\"flip-file-viewer-video\",{\"file\":[1],\"type\":[1]}]]],[\"flip-button.cjs\",[[2,\"flip-button\",{\"disabled\":[4],\"download\":[1],\"flipAriaDescribedby\":[1,\"flip-aria-describedby\"],\"flipAriaLabel\":[1,\"flip-aria-label\"],\"form\":[1],\"hideLabel\":[4,\"hide-label\"],\"href\":[1],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"],\"intent\":[1],\"label\":[1],\"name\":[1],\"size\":[1],\"target\":[1],\"type\":[1],\"value\":[1],\"variant\":[1]}]]],[\"flip-icon-error_3.cjs\",[[1,\"flip-spinner\",{\"label\":[1],\"size\":[1]}],[1,\"flip-inline-error\",{\"message\":[1],\"size\":[1]}],[1,\"flip-icon-error\",{\"size\":[2]}]]]]"), options);
 });
 
 //# sourceMappingURL=swirl-components.cjs.js.map

package/dist/collection/collection-manifest.json

@@ -121,6 +121,7 @@
     "./components/flip-icon/icons/flip-icon-visibility-off.js",
     "./components/flip-icon/icons/flip-icon-visibility.js",
     "./components/flip-icon/icons/flip-icon-warning.js",
+    "./components/flip-lightbox/flip-lightbox.js",
     "./components/flip-list/flip-list.js",
     "./components/flip-modal/flip-modal.js",
     "./components/flip-option-list/flip-option-list.js",

package/dist/collection/components/flip-action-list-item/flip-action-list-item.css

@@ -55,6 +55,10 @@
   padding: var(--s-space-16);
 }
 
+.action-list-item--intent-critical ::part(icon) {
+    color: var(--s-icon-critical);
+  }
+
 .action-list-item--intent-critical:not(:disabled) .action-list-item__label {
       color: var(--s-text-critical);
     }

package/dist/collection/components/flip-avatar/flip-avatar.js

@@ -41,9 +41,19 @@ export class FlipAvatar {
       }
     };
   }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
   watchSrcProp() {
     this.imageAvailable = undefined;
   }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("flip-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
   render() {
     const showImage = Boolean(this.src) &&
       (this.imageAvailable || this.imageAvailable === undefined);
@@ -67,7 +77,7 @@ export class FlipAvatar {
         showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }),
         showFallbackIcon && (h("span", { class: "avatar__icon" },
           h("flip-icon-person", null))),
-        showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge }))),
+        showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) }))),
       this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
   }
   static get is() { return "flip-avatar"; }

package/dist/collection/components/flip-avatar/flip-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-avatar.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar/flip-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" | \"top\";\nexport type FlipAvatarSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\";\nexport type FlipAvatarVariant = \"round\" | \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n  xs: 28,\n  s: 32,\n  m: 40,\n  l: 48,\n  xl: 64,\n  \"2xl\": 144,\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar.css\",\n  tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n  @Element() element: HTMLElement;\n\n  @Prop() badge?: string;\n  @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n  @Prop() icon?: string;\n  @Prop() initials?: string;\n  @Prop() interactive?: boolean = false;\n  @Prop() label!: string;\n  @Prop() showLabel?: boolean = false;\n  @Prop() size?: FlipAvatarSize = \"m\";\n  @Prop() src?: string;\n  @Prop() variant?: FlipAvatarVariant = \"round\";\n\n  @State() imageAvailable: boolean | undefined;\n\n  @Watch(\"src\")\n  watchSrcProp() {\n    this.imageAvailable = undefined;\n  }\n\n  private setImageAvailable = () => {\n    this.imageAvailable = true;\n  };\n\n  private setImageUnavailable = () => {\n    this.imageAvailable = false;\n  };\n\n  private onKeydown = (event: KeyboardEvent) => {\n    // The interactive avatar is activated by the space key on the keyup event,\n    // but the default action for space is already triggered on keydown. It\n    // needs to be prevented to stop scrolling the page before activating the\n    // avatar.\n    if (event.code === \"Space\") {\n      event.preventDefault();\n    } else if (event.code === \"Enter\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  private onKeyup = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  render() {\n    const showImage =\n      Boolean(this.src) &&\n      (this.imageAvailable || this.imageAvailable === undefined);\n\n    const showInitials = !showImage && Boolean(this.initials);\n    const showIcon = !showImage && !showInitials && Boolean(this.icon);\n    const showFallbackIcon = !showImage && !showInitials && !showIcon;\n    const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n    const role = this.interactive ? \"button\" : \"img\";\n\n    const className = classnames(\n      \"avatar\",\n      `avatar--size-${this.size}`,\n      `avatar--variant-${this.variant}`,\n      {\n        \"avatar--has-icon\": showIcon || showFallbackIcon,\n        \"avatar--has-initials\": showInitials,\n        \"avatar--interactive\": this.interactive,\n      }\n    );\n\n    const badgeClassName = classnames(\n      \"avatar__badge\",\n      `avatar__badge--position-${this.badgePosition}`\n    );\n\n    return (\n      <Host\n        aria-label={this.label}\n        onKeydown={this.interactive ? this.onKeydown : undefined}\n        onKeyup={this.interactive ? this.onKeyup : undefined}\n        role={role}\n        tabIndex={this.interactive ? 0 : undefined}\n      >\n        <span class={className} part=\"avatar\">\n          {showImage && (\n            <span class=\"avatar__image\">\n              <img\n                alt=\"\"\n                height={flipAvatarSizeMappings[this.size]}\n                onError={this.setImageUnavailable}\n                onLoad={this.setImageAvailable}\n                src={this.src}\n                width={flipAvatarSizeMappings[this.size]}\n              />\n            </span>\n          )}\n          {showInitials && (\n            <span class=\"avatar__initials\">\n              <span>{this.initials}</span>\n            </span>\n          )}\n          {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n          {showFallbackIcon && (\n            <span class=\"avatar__icon\">\n              <flip-icon-person></flip-icon-person>\n            </span>\n          )}\n          {showBadge && (\n            <span class={badgeClassName} innerHTML={this.badge}></span>\n          )}\n        </span>\n\n        {this.showLabel && (\n          <span aria-hidden class=\"avatar__label\">\n            {this.label}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-avatar.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar/flip-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" | \"top\";\nexport type FlipAvatarSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\";\nexport type FlipAvatarVariant = \"round\" | \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n  xs: 28,\n  s: 32,\n  m: 40,\n  l: 48,\n  xl: 64,\n  \"2xl\": 144,\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar.css\",\n  tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n  @Element() element: HTMLElement;\n\n  @Prop() badge?: string;\n  @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n  @Prop() icon?: string;\n  @Prop() initials?: string;\n  @Prop() interactive?: boolean = false;\n  @Prop() label!: string;\n  @Prop() showLabel?: boolean = false;\n  @Prop() size?: FlipAvatarSize = \"m\";\n  @Prop() src?: string;\n  @Prop() variant?: FlipAvatarVariant = \"round\";\n\n  @State() imageAvailable: boolean | undefined;\n\n  private badgeEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceBadgeProps();\n  }\n\n  @Watch(\"src\")\n  watchSrcProp() {\n    this.imageAvailable = undefined;\n  }\n\n  private forceBadgeProps() {\n    if (!Boolean(this.badge)) {\n      return;\n    }\n\n    const badge = this.badgeEl.querySelector(\"flip-badge\");\n\n    badge?.setAttribute(\"size\", \"m\");\n  }\n\n  private setImageAvailable = () => {\n    this.imageAvailable = true;\n  };\n\n  private setImageUnavailable = () => {\n    this.imageAvailable = false;\n  };\n\n  private onKeydown = (event: KeyboardEvent) => {\n    // The interactive avatar is activated by the space key on the keyup event,\n    // but the default action for space is already triggered on keydown. It\n    // needs to be prevented to stop scrolling the page before activating the\n    // avatar.\n    if (event.code === \"Space\") {\n      event.preventDefault();\n    } else if (event.code === \"Enter\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  private onKeyup = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  render() {\n    const showImage =\n      Boolean(this.src) &&\n      (this.imageAvailable || this.imageAvailable === undefined);\n\n    const showInitials = !showImage && Boolean(this.initials);\n    const showIcon = !showImage && !showInitials && Boolean(this.icon);\n    const showFallbackIcon = !showImage && !showInitials && !showIcon;\n    const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n    const role = this.interactive ? \"button\" : \"img\";\n\n    const className = classnames(\n      \"avatar\",\n      `avatar--size-${this.size}`,\n      `avatar--variant-${this.variant}`,\n      {\n        \"avatar--has-icon\": showIcon || showFallbackIcon,\n        \"avatar--has-initials\": showInitials,\n        \"avatar--interactive\": this.interactive,\n      }\n    );\n\n    const badgeClassName = classnames(\n      \"avatar__badge\",\n      `avatar__badge--position-${this.badgePosition}`\n    );\n\n    return (\n      <Host\n        aria-label={this.label}\n        onKeydown={this.interactive ? this.onKeydown : undefined}\n        onKeyup={this.interactive ? this.onKeyup : undefined}\n        role={role}\n        tabIndex={this.interactive ? 0 : undefined}\n      >\n        <span class={className} part=\"avatar\">\n          {showImage && (\n            <span class=\"avatar__image\">\n              <img\n                alt=\"\"\n                height={flipAvatarSizeMappings[this.size]}\n                onError={this.setImageUnavailable}\n                onLoad={this.setImageAvailable}\n                src={this.src}\n                width={flipAvatarSizeMappings[this.size]}\n              />\n            </span>\n          )}\n          {showInitials && (\n            <span class=\"avatar__initials\">\n              <span>{this.initials}</span>\n            </span>\n          )}\n          {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n          {showFallbackIcon && (\n            <span class=\"avatar__icon\">\n              <flip-icon-person></flip-icon-person>\n            </span>\n          )}\n          {showBadge && (\n            <span\n              class={badgeClassName}\n              innerHTML={this.badge}\n              ref={(el) => (this.badgeEl = el)}\n            ></span>\n          )}\n        </span>\n\n        {this.showLabel && (\n          <span aria-hidden class=\"avatar__label\">\n            {this.label}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-avatar-group/flip-avatar-group.js

@@ -4,6 +4,16 @@ import classnames from "classnames";
  * @slot slot - Your avatar components
  */
 export class FlipAvatarGroup {
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("flip-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
   render() {
     const className = classnames("avatar-group", {
       "avatar-group--has-badge": Boolean(this.badge),
@@ -12,7 +22,7 @@ export class FlipAvatarGroup {
     return (h(Host, null,
       h("div", { class: className, role: "group" },
         h("slot", null),
-        this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge })))));
+        this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
   }
   static get is() { return "flip-avatar-group"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-avatar-group/flip-avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-avatar-group.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar-group/flip-avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;GAEG;AAMH,MAAM,OAAO,eAAe;EAG1B,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO;QACjC,eAAa;QACZ,IAAI,CAAC,KAAK,IAAI,CACb,YAAM,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC5D,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - Your avatar components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar-group.css\",\n  tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n  @Prop() badge?: string;\n\n  render() {\n    const className = classnames(\"avatar-group\", {\n      \"avatar-group--has-badge\": Boolean(this.badge),\n    });\n\n    const badgeClassName = classnames(\"avatar-group__badge\");\n\n    return (\n      <Host>\n        <div class={className} role=\"group\">\n          <slot></slot>\n          {this.badge && (\n            <span class={badgeClassName} innerHTML={this.badge}></span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-avatar-group.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar-group/flip-avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;GAEG;AAMH,MAAM,OAAO,eAAe;EAK1B,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAEO,eAAe;IACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MACxB,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEvD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO;QACjC,eAAa;QACZ,IAAI,CAAC,KAAK,IAAI,CACb,YACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAC1B,CACT,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - Your avatar components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar-group.css\",\n  tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n  @Prop() badge?: string;\n\n  private badgeEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceBadgeProps();\n  }\n\n  private forceBadgeProps() {\n    if (!Boolean(this.badge)) {\n      return;\n    }\n\n    const badge = this.badgeEl.querySelector(\"flip-badge\");\n\n    badge?.setAttribute(\"size\", \"m\");\n  }\n\n  render() {\n    const className = classnames(\"avatar-group\", {\n      \"avatar-group--has-badge\": Boolean(this.badge),\n    });\n\n    const badgeClassName = classnames(\"avatar-group__badge\");\n\n    return (\n      <Host>\n        <div class={className} role=\"group\">\n          <slot></slot>\n          {this.badge && (\n            <span\n              class={badgeClassName}\n              innerHTML={this.badge}\n              ref={(el) => (this.badgeEl = el)}\n            ></span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-button/flip-button.css

@@ -14,7 +14,10 @@
   justify-content: center;
   align-items: center;
   border: none;
-  border-radius: var(--s-border-radius-base);
+  border-top-right-radius: var(--flip-button-border-top-right-radius);
+  border-top-left-radius: var(--flip-button-border-top-left-radius);
+  border-bottom-right-radius: var(--flip-button-border-bottom-right-radius);
+  border-bottom-left-radius: var(--flip-button-border-bottom-left-radius);
   color: var(--s-text-subdued);
   background-color: var(--flip-ghost-button-background-default);
   font: inherit;
@@ -272,7 +275,12 @@
 
 .button--icon-only {
   padding: var(--s-space-8);
-  border-radius: 50%;
+  border-top-right-radius: var(--flip-icon-button-border-top-right-radius);
+  border-top-left-radius: var(--flip-icon-button-border-top-left-radius);
+  border-bottom-right-radius: var(
+    --flip-icon-button-border-bottom-right-radius
+  );
+  border-bottom-left-radius: var(--flip-icon-button-border-bottom-left-radius);
 }
 
 .button--icon-only .button__icon {

package/dist/collection/components/flip-button-group/flip-button-group.css

@@ -5,3 +5,60 @@
   :host * {
     box-sizing: border-box;
   }
+
+.button-group--segmented ::slotted(*:not(:last-child)) {
+    position: relative;
+  }
+
+.button-group--segmented ::slotted(*:not(:last-child)):after {
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 100%;
+      width: var(--s-border-width-default);
+      height: calc(100% - var(--s-space-16));
+      background-color: var(--s-border-strong);
+      content: "";
+      transform: translate3d(-50%, -50%, 0);
+      pointer-events: none;
+    }
+
+.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after {
+      background-color: var(--s-text-on-action-primary);
+    }
+
+.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after {
+      background-color: var(--s-text-on-action-primary);
+    }
+
+.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)) {
+    --flip-button-border-top-right-radius: 0;
+    --flip-button-border-top-left-radius: 0;
+    --flip-button-border-bottom-right-radius: 0;
+    --flip-button-border-bottom-left-radius: 0;
+
+    --flip-icon-button-border-top-right-radius: 0;
+    --flip-icon-button-border-top-left-radius: 0;
+    --flip-icon-button-border-bottom-right-radius: 0;
+    --flip-icon-button-border-bottom-left-radius: 0;
+  }
+
+.button-group--segmented ::slotted(*:first-child) {
+    --flip-button-border-top-right-radius: 0;
+    --flip-button-border-bottom-right-radius: 0;
+
+    --flip-icon-button-border-top-right-radius: 0;
+    --flip-icon-button-border-bottom-right-radius: 0;
+    --flip-icon-button-border-top-left-radius: var(--s-border-radius-base);
+    --flip-icon-button-border-bottom-left-radius: var(--s-border-radius-base);
+  }
+
+.button-group--segmented ::slotted(*:last-child) {
+    --flip-button-border-top-left-radius: 0;
+    --flip-button-border-bottom-left-radius: 0;
+
+    --flip-icon-button-border-top-right-radius: var(--s-border-radius-base);
+    --flip-icon-button-border-bottom-right-radius: var(--s-border-radius-base);
+    --flip-icon-button-border-top-left-radius: 0;
+    --flip-icon-button-border-bottom-left-radius: 0;
+  }

package/dist/collection/components/flip-button-group/flip-button-group.js

@@ -1,15 +1,20 @@
 import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
 export class FlipButtonGroup {
   constructor() {
     this.orientation = "horizontal";
   }
   render() {
+    const spacing = this.segmented ? "0" : "8";
+    const className = classnames("button-group", {
+      "button-group--segmented": this.segmented,
+    });
     return (h(Host, null,
       h("flip-stack", { align: this.orientation === "vertical" && this.stretch
           ? "stretch"
-          : "start", class: "button-group", justify: this.orientation === "horizontal" && this.stretch
+          : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
           ? "stretch"
-          : "start", orientation: this.orientation, role: "group", spacing: "8", wrap: this.wrap },
+          : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap },
         h("slot", null))));
   }
   static get is() { return "flip-button-group"; }
@@ -34,7 +39,7 @@ export class FlipButtonGroup {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -43,6 +48,23 @@ export class FlipButtonGroup {
       "reflect": false,
       "defaultValue": "\"horizontal\""
     },
+    "segmented": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "segmented",
+      "reflect": false
+    },
     "stretch": {
       "type": "boolean",
       "mutable": false,
@@ -52,7 +74,7 @@ export class FlipButtonGroup {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -69,7 +91,7 @@ export class FlipButtonGroup {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""

package/dist/collection/components/flip-button-group/flip-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-button-group.js","sourceRoot":"","sources":["../../../../src/components/flip-button-group/flip-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,eAAe;EAL5B;IAMU,gBAAW,GAA+B,YAAY,CAAC;GA6BhE;EAzBC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,kBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC7C,CAAC,CAAC,SAAS;UACX,CAAC,CAAC,OAAO,EAEb,KAAK,EAAC,cAAc,EACpB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC/C,CAAC,CAAC,SAAS;UACX,CAAC,CAAC,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,GAAG,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;QAEf,eAAa,CACF,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { FlipStackOrientation } from \"../flip-stack/flip-stack\";\n\nexport type FlipButtonGroupOrientation = FlipStackOrientation;\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-button-group.css\",\n  tag: \"flip-button-group\",\n})\nexport class FlipButtonGroup {\n  @Prop() orientation: FlipButtonGroupOrientation = \"horizontal\";\n  @Prop() stretch: boolean;\n  @Prop() wrap: boolean;\n\n  render() {\n    return (\n      <Host>\n        <flip-stack\n          align={\n            this.orientation === \"vertical\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          class=\"button-group\"\n          justify={\n            this.orientation === \"horizontal\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          orientation={this.orientation}\n          role=\"group\"\n          spacing=\"8\"\n          wrap={this.wrap}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-button-group.js","sourceRoot":"","sources":["../../../../src/components/flip-button-group/flip-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAUpC,MAAM,OAAO,eAAe;EAL5B;IAMU,gBAAW,GAAgC,YAAY,CAAC;GAoCjE;EA/BC,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAE3C,MAAM,SAAS,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,IAAI,CAAC,SAAS;KAC1C,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI;MACH,kBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC7C,CAAC,CAAC,SAAS;UACX,CAAC,CAAC,OAAO,EAEb,KAAK,EAAE,SAAS,EAChB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC/C,CAAC,CAAC,SAAS;UACX,CAAC,CAAC,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI;QAEf,eAAa,CACF,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipStackOrientation } from \"../flip-stack/flip-stack\";\n\nexport type FlipButtonGroupOrientation = FlipStackOrientation;\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-button-group.css\",\n  tag: \"flip-button-group\",\n})\nexport class FlipButtonGroup {\n  @Prop() orientation?: FlipButtonGroupOrientation = \"horizontal\";\n  @Prop() segmented?: boolean;\n  @Prop() stretch?: boolean;\n  @Prop() wrap?: boolean;\n\n  render() {\n    const spacing = this.segmented ? \"0\" : \"8\";\n\n    const className = classnames(\"button-group\", {\n      \"button-group--segmented\": this.segmented,\n    });\n\n    return (\n      <Host>\n        <flip-stack\n          align={\n            this.orientation === \"vertical\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          class={className}\n          justify={\n            this.orientation === \"horizontal\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          orientation={this.orientation}\n          role=\"group\"\n          spacing={spacing}\n          wrap={this.wrap}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-button-group/flip-button-group.stories.js

@@ -1,6 +1,11 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./flip-button-group.mdx";
 export default {
+  argTypes: {
+    segmented: {
+      description: 'Should only be used with button variant "flat" and horizontal orientation.',
+    },
+  },
   component: "flip-button-group",
   parameters: {
     docs: {
@@ -12,8 +17,9 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("flip-button-group", args);
   element.innerHTML = `
-    <flip-button label="Button"></flip-button>
-    <flip-button intent="primary" label="Button" variant="flat"></flip-button>
+    <flip-button label="Button" variant="flat"></flip-button>
+    <flip-button label="Button" variant="flat"></flip-button>
+    <flip-button icon="<flip-icon-expand-more></flip-icon-expand-more>" label="Button" hide-label variant="flat"></flip-button>
   `;
   return element;
 };

package/dist/collection/components/flip-button-group/flip-button-group.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-button-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-button-group/flip-button-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;EACb,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;EAEhE,OAAO,CAAC,SAAS,GAAG;;;GAGnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-button-group.mdx\";\n\nexport default {\n  component: \"flip-button-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipButtonGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-button-group\", args);\n\n  element.innerHTML = `\n    <flip-button label=\"Button\"></flip-button>\n    <flip-button intent=\"primary\" label=\"Button\" variant=\"flat\"></flip-button>\n  `;\n\n  return element;\n};\n\nexport const FlipButtonGroup = Template.bind({});\n\nFlipButtonGroup.args = {};\n"]}
+{"version":3,"file":"flip-button-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-button-group/flip-button-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;EACb,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,WAAW,EACT,4EAA4E;KAC/E;GACF;EACD,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;EAEhE,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-button-group.mdx\";\n\nexport default {\n  argTypes: {\n    segmented: {\n      description:\n        'Should only be used with button variant \"flat\" and horizontal orientation.',\n    },\n  },\n  component: \"flip-button-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipButtonGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-button-group\", args);\n\n  element.innerHTML = `\n    <flip-button label=\"Button\" variant=\"flat\"></flip-button>\n    <flip-button label=\"Button\" variant=\"flat\"></flip-button>\n    <flip-button icon=\"<flip-icon-expand-more></flip-icon-expand-more>\" label=\"Button\" hide-label variant=\"flat\"></flip-button>\n  `;\n\n  return element;\n};\n\nexport const FlipButtonGroup = Template.bind({});\n\nFlipButtonGroup.args = {};\n"]}

package/dist/collection/components/flip-checkbox/flip-checkbox.css

@@ -118,7 +118,7 @@
 
 .checkbox__label-container {
   display: inline-flex;
-  margin-left: var(--s-space-12);
+  margin-left: var(--s-space-8);
   padding-top: var(--s-space-4);
   align-items: flex-start;
   flex-direction: column;

package/dist/collection/components/flip-date-picker/flip-date-picker.css

@@ -29,7 +29,6 @@
   display: flex;
   margin-bottom: var(--s-space-8);
   align-items: center;
-  gap: var(--s-space-4);
 }
 
 .air-datepicker-nav--action {

package/dist/collection/components/flip-dialog/flip-dialog.css

@@ -80,7 +80,7 @@
   padding-right: var(--s-space-8);
   padding-bottom: var(--s-space-8);
   padding-left: var(--s-space-8);
-  border-radius: var(--s-border-radius-xl);
+  border-radius: var(--s-border-radius-l);
   background-color: var(--s-surface-overlay-default);
   text-align: center;
   box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);

package/dist/collection/components/flip-file-uploader/flip-file-uploader.css

@@ -25,13 +25,15 @@
   }
 
 .file-uploader--show-dropzone .file-uploader__dropzone:focus-within {
-      border-color: var(--s-focus-default);
       border-width: 0.125rem;
+      border-color: var(--s-focus-default);
     }
 
 .file-uploader--show-dropzone .file-uploader__input {
     position: absolute;
+    z-index: 1;
     display: block;
+    width: 100%;
     cursor: pointer;
     opacity: 0;
     inset: 0;

package/dist/collection/components/flip-file-viewer/flip-file-viewer.js

@@ -2,6 +2,7 @@ import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { saveAs } from "file-saver";
 export class FlipFileViewer {
   constructor() {
+    this.active = true;
     this.errorMessage = "File could not be loaded.";
     this.typeUnsupportedMessage = "File type is not supported.";
     this.zoom = 1;
@@ -30,7 +31,7 @@ export class FlipFileViewer {
         this.type !== "text/csv" &&
         this.type !== "application/pdf");
     return (h(Host, null,
-      h("div", { class: "file-viewer" }, this.type && (h("div", { class: "file-viewer__file" },
+      h("div", { class: "file-viewer" }, this.type && this.active && (h("div", { class: "file-viewer__file" },
         this.type.startsWith("image/") && (h("flip-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })),
         this.type === "text/plain" && (h("flip-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })),
         this.type === "text/csv" && (h("flip-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })),
@@ -48,6 +49,24 @@ export class FlipFileViewer {
     "$": ["flip-file-viewer.css"]
   }; }
   static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "description": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/flip-file-viewer/flip-file-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-file-viewer.js","sourceRoot":"","sources":["../../../../src/components/flip-file-viewer/flip-file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Method, Prop } from \"@stencil/core\";\nimport { saveAs } from \"file-saver\";\nimport { FlipFileViewerPdfZoom } from \"./viewers/flip-file-viewer-pdf/flip-file-viewer-pdf\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer.css\",\n  tag: \"flip-file-viewer\",\n})\nexport class FlipFileViewer {\n  @Prop() description?: string;\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n  @Prop() type!: string;\n  @Prop() typeUnsupportedMessage?: string = \"File type is not supported.\";\n  @Prop() zoom?: FlipFileViewerPdfZoom = 1;\n\n  private viewer: HTMLElement;\n\n  /**\n   * Download the file.\n   */\n  @Method()\n  async download() {\n    const fileName = this.file.split(\"/\").pop();\n\n    saveAs(this.file, fileName);\n  }\n\n  /**\n   * Print the file. Applicable to PDFs only.\n   */\n  @Method()\n  async print() {\n    if (this.type === \"application/pdf\") {\n      (this.viewer as HTMLFlipFileViewerPdfElement).print();\n    }\n  }\n\n  render() {\n    const unsupportedType =\n      !Boolean(this.type) ||\n      (!this.type.startsWith(\"image/\") &&\n        !this.type.startsWith(\"video/\") &&\n        !this.type.startsWith(\"audio/\") &&\n        this.type !== \"text/plain\" &&\n        this.type !== \"text/csv\" &&\n        this.type !== \"application/pdf\");\n\n    return (\n      <Host>\n        <div class=\"file-viewer\">\n          {this.type && (\n            <div class=\"file-viewer__file\">\n              {/* images */}\n              {this.type.startsWith(\"image/\") && (\n                <flip-file-viewer-image\n                  description={this.description}\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-image>\n              )}\n\n              {/* text files */}\n              {this.type === \"text/plain\" && (\n                <flip-file-viewer-text\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-text>\n              )}\n\n              {/* csv files */}\n              {this.type === \"text/csv\" && (\n                <flip-file-viewer-csv\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-csv>\n              )}\n\n              {/* pdf files */}\n              {this.type === \"application/pdf\" && (\n                <flip-file-viewer-pdf\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  zoom={this.zoom}\n                ></flip-file-viewer-pdf>\n              )}\n\n              {/* video files */}\n              {this.type.startsWith(\"video/\") && (\n                <flip-file-viewer-video\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-video>\n              )}\n\n              {/* audio files */}\n              {this.type.startsWith(\"audio/\") && (\n                <flip-file-viewer-audio\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-audio>\n              )}\n\n              {unsupportedType && (\n                <flip-inline-error\n                  message={this.typeUnsupportedMessage}\n                ></flip-inline-error>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-file-viewer.js","sourceRoot":"","sources":["../../../../src/components/flip-file-viewer/flip-file-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,cAAc;EAL3B;IAMU,WAAM,GAAa,IAAI,CAAC;IAExB,iBAAY,GAAY,2BAA2B,CAAC;IAGpD,2BAAsB,GAAY,6BAA6B,CAAC;IAChE,SAAI,GAA2B,CAAC,CAAC;GA0G1C;EAtGC;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IAE5C,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;EAC9B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,EAAE;MAClC,IAAI,CAAC,MAAuC,CAAC,KAAK,EAAE,CAAC;KACvD;EACH,CAAC;EAED,MAAM;IACJ,MAAM,eAAe,GACnB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;MACnB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAC9B,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAC/B,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,IAAI,KAAK,YAAY;QAC1B,IAAI,CAAC,IAAI,KAAK,UAAU;QACxB,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAErC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,CAC3B,WAAK,KAAK,EAAC,mBAAmB;QAE3B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CACjC,8BACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACP,CAC3B;QAGA,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,CAC7B,6BACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACR,CAC1B;QAGA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B,4BACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACT,CACzB;QAGA,IAAI,CAAC,IAAI,KAAK,iBAAiB,IAAI,CAClC,4BACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,GACO,CACzB;QAGA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CACjC,8BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,GACS,CAC3B;QAGA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CACjC,8BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,GACS,CAC3B;QAEA,eAAe,IAAI,CAClB,yBACE,OAAO,EAAE,IAAI,CAAC,sBAAsB,GACjB,CACtB,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Method, Prop } from \"@stencil/core\";\nimport { saveAs } from \"file-saver\";\nimport { FlipFileViewerPdfZoom } from \"./viewers/flip-file-viewer-pdf/flip-file-viewer-pdf\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer.css\",\n  tag: \"flip-file-viewer\",\n})\nexport class FlipFileViewer {\n  @Prop() active?: boolean = true;\n  @Prop() description?: string;\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n  @Prop() type!: string;\n  @Prop() typeUnsupportedMessage?: string = \"File type is not supported.\";\n  @Prop() zoom?: FlipFileViewerPdfZoom = 1;\n\n  private viewer: HTMLElement;\n\n  /**\n   * Download the file.\n   */\n  @Method()\n  async download() {\n    const fileName = this.file.split(\"/\").pop();\n\n    saveAs(this.file, fileName);\n  }\n\n  /**\n   * Print the file. Applicable to PDFs only.\n   */\n  @Method()\n  async print() {\n    if (this.type === \"application/pdf\") {\n      (this.viewer as HTMLFlipFileViewerPdfElement).print();\n    }\n  }\n\n  render() {\n    const unsupportedType =\n      !Boolean(this.type) ||\n      (!this.type.startsWith(\"image/\") &&\n        !this.type.startsWith(\"video/\") &&\n        !this.type.startsWith(\"audio/\") &&\n        this.type !== \"text/plain\" &&\n        this.type !== \"text/csv\" &&\n        this.type !== \"application/pdf\");\n\n    return (\n      <Host>\n        <div class=\"file-viewer\">\n          {this.type && this.active && (\n            <div class=\"file-viewer__file\">\n              {/* images */}\n              {this.type.startsWith(\"image/\") && (\n                <flip-file-viewer-image\n                  description={this.description}\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-image>\n              )}\n\n              {/* text files */}\n              {this.type === \"text/plain\" && (\n                <flip-file-viewer-text\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-text>\n              )}\n\n              {/* csv files */}\n              {this.type === \"text/csv\" && (\n                <flip-file-viewer-csv\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-csv>\n              )}\n\n              {/* pdf files */}\n              {this.type === \"application/pdf\" && (\n                <flip-file-viewer-pdf\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  zoom={this.zoom}\n                ></flip-file-viewer-pdf>\n              )}\n\n              {/* video files */}\n              {this.type.startsWith(\"video/\") && (\n                <flip-file-viewer-video\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-video>\n              )}\n\n              {/* audio files */}\n              {this.type.startsWith(\"audio/\") && (\n                <flip-file-viewer-audio\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-audio>\n              )}\n\n              {unsupportedType && (\n                <flip-inline-error\n                  message={this.typeUnsupportedMessage}\n                ></flip-inline-error>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-csv/flip-file-viewer-csv.css

@@ -13,6 +13,8 @@
   overflow: auto;
   width: 100%;
   max-height: 100%;
+  padding: var(--s-space-16);
+  background-color: var(--s-background-default);
 }
 
 .file-viewer-csv__table {

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-text/flip-file-viewer-text.css

@@ -15,6 +15,8 @@
   max-height: 100%;
   margin: 0;
   padding: 0;
+  padding: var(--s-space-16);
+  background-color: var(--s-background-default);
   font-family: var(--s-font-family-code);
 }
 

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-video/flip-file-viewer-video.css

@@ -1,7 +1,7 @@
 :host {
   display: inline-flex;
   width: 100%;
-  height: 100%;
+  max-height: 100%;
 }
 
   :host * {
@@ -10,5 +10,5 @@
 
 .file-viewer-video__video {
   width: 100%;
-  height: 100%;
+  background-color: rgba(0, 0, 0, 1);
 }