@mantine-vue/lightbox 3.3.0

package/lib/LightboxRoot/LightboxRoot.vue.d.ts

@@ -0,0 +1,35 @@
+import type { LightboxRootOwnProps, LightboxRootSlots } from './LightboxRoot.types';
+export declare const lightboxRootDefaultProps: {
+    readonly withZoom: false;
+    readonly withThumbnails: false;
+    readonly withFullscreen: false;
+    readonly withDownload: false;
+    readonly loop: false;
+    readonly closeOnClickOutside: false;
+    readonly closeOnSwipeDown: true;
+    readonly withKeyboardEvents: true;
+    readonly returnFocus: true;
+    readonly withInitialFocusPlaceholder: true;
+    readonly withinPortal: true;
+    readonly transitionDuration: 200;
+    readonly zoomMaxScale: 3;
+    readonly withSlideTransition: false;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LightboxRootOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:opened": (opened: boolean) => any;
+    indexChange: (index: number) => any;
+    "update:currentIndex": (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<LightboxRootOwnProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:opened"?: ((opened: boolean) => any) | undefined;
+    onIndexChange?: ((index: number) => any) | undefined;
+    "onUpdate:currentIndex"?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LightboxRootSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/LightboxRoot/index.d.ts

@@ -0,0 +1 @@
+export * from './LightboxRoot';

package/lib/LightboxSlide/LightboxSlide.d.ts

@@ -0,0 +1,3 @@
+import LightboxSlide from './LightboxSlide.vue';
+export { LightboxSlide };
+export type { LightboxSlideProps, LightboxSlideSlots, LightboxSlideStylesNames, } from './LightboxSlide.types';

package/lib/LightboxSlide/LightboxSlide.types.d.ts

@@ -0,0 +1,16 @@
+import type { VNodeChild } from 'vue';
+import type { BoxProps } from '@mantine-vue/core';
+import type { LightboxSlideData } from '../types';
+export type LightboxSlideStylesNames = 'slide' | 'slideImage' | 'slideVideo';
+export interface LightboxSlideProps extends /* @vue-ignore */ BoxProps {
+    /** Slide data rendered by the component */
+    slide: LightboxSlideData;
+    /** Zero-based slide index */
+    index: number;
+}
+export interface LightboxSlideSlots {
+    default?: (props: {
+        slide: LightboxSlideData;
+        active: boolean;
+    }) => VNodeChild;
+}

package/lib/LightboxSlide/LightboxSlide.vue.d.ts

@@ -0,0 +1,11 @@
+import type { LightboxSlideProps, LightboxSlideSlots } from './LightboxSlide.types';
+type __VLS_Slots = LightboxSlideSlots;
+declare const __VLS_base: import("vue").DefineComponent<LightboxSlideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LightboxSlideProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/LightboxSlide/index.d.ts

@@ -0,0 +1 @@
+export * from './LightboxSlide';

package/lib/LightboxSlides/LightboxSlides.d.ts

@@ -0,0 +1,9 @@
+import type { VNodeChild } from 'vue';
+import type { BoxProps } from '@mantine-vue/core';
+import LightboxSlides from './LightboxSlides.vue';
+export { LightboxSlides };
+export type LightboxSlidesStylesNames = 'slides' | 'slidesViewport' | 'slidesContainer';
+export type LightboxSlidesProps = BoxProps;
+export interface LightboxSlidesSlots {
+    default?: () => VNodeChild;
+}

package/lib/LightboxSlides/LightboxSlides.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/LightboxSlides/index.d.ts

@@ -0,0 +1 @@
+export * from './LightboxSlides';

package/lib/LightboxThumbnails/LightboxThumbnails.d.ts

@@ -0,0 +1,5 @@
+import type { BoxProps } from '@mantine-vue/core';
+import LightboxThumbnails from './LightboxThumbnails.vue';
+export { LightboxThumbnails };
+export type LightboxThumbnailsStylesNames = 'thumbnails' | 'thumbnailsViewport' | 'thumbnailsContainer' | 'thumbnail' | 'thumbnailImage';
+export type LightboxThumbnailsProps = BoxProps;

package/lib/LightboxThumbnails/LightboxThumbnails.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/LightboxThumbnails/index.d.ts

@@ -0,0 +1 @@
+export * from './LightboxThumbnails';

package/lib/LightboxToolbar/LightboxToolbar.d.ts

@@ -0,0 +1,9 @@
+import type { BoxProps } from '@mantine-vue/core';
+import type { ToolbarItems } from '../types';
+import LightboxToolbar from './LightboxToolbar.vue';
+export { LightboxToolbar };
+export * from './toolbar-items';
+export type LightboxToolbarStylesNames = 'toolbar' | 'toolbarGroup' | 'toolbarButton' | 'counter';
+export interface LightboxToolbarProps extends BoxProps {
+    toolbarItems?: ToolbarItems;
+}

package/lib/LightboxToolbar/LightboxToolbar.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ToolbarItems } from '../types';
+type __VLS_Props = {
+    toolbarItems?: ToolbarItems;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/LightboxToolbar/index.d.ts

@@ -0,0 +1 @@
+export * from './LightboxToolbar';

package/lib/LightboxToolbar/toolbar-items.d.ts

@@ -0,0 +1,5 @@
+import type { LightboxLabels, ToolbarItem } from '../types';
+export declare function createFullscreenToolbarItem(toggle: () => void, isFullscreen: boolean, labels?: LightboxLabels): ToolbarItem;
+export declare function createThumbnailsToolbarItem(toggle: () => void, visible: boolean, labels?: LightboxLabels): ToolbarItem;
+export declare function createDownloadToolbarItem(src: string, labels?: LightboxLabels): ToolbarItem;
+export declare function createCloseToolbarItem(onClose: () => void, labels?: LightboxLabels): ToolbarItem;

package/lib/default-labels.d.ts

@@ -0,0 +1,2 @@
+import type { LightboxLabels } from './types';
+export declare const DEFAULT_LABELS: LightboxLabels;

package/lib/hooks/use-lightbox-zoom.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties } from 'vue';
+export interface LightboxZoomState {
+    scale: number;
+    translateX: number;
+    translateY: number;
+    isZoomed: boolean;
+}
+interface UseLightboxZoomInput {
+    enabled: () => boolean;
+    maxScale: () => number;
+    currentIndex: () => number;
+}
+export declare function useLightboxZoom({ enabled, maxScale, currentIndex }: UseLightboxZoomInput): {
+    zoomState: import("vue").ComputedRef<{
+        scale: number;
+        isZoomed: boolean;
+    }>;
+    toggleZoom: () => void;
+    resetZoom: () => void;
+    panZoom: (deltaX: number, deltaY: number) => boolean;
+    getImageProps: () => {
+        ref: (node: unknown) => void;
+        style: CSSProperties;
+        'data-zoom-enabled': true | undefined;
+        'data-zoomed': true | undefined;
+        'data-dragging': true | undefined;
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onPointerup: () => void;
+        onPointercancel: () => void;
+        onLostpointercapture: () => void;
+        onClick: (event: MouseEvent) => void;
+        onDblclick: () => void;
+        onTouchmove: (event: TouchEvent) => void;
+        onTouchend: () => void;
+    };
+};
+export {};

package/lib/index.d.mts

@@ -0,0 +1,13 @@
+export * from './Lightbox';
+export * from './LightboxRoot';
+export * from './LightboxToolbar';
+export * from './LightboxSlides';
+export * from './LightboxSlide';
+export * from './LightboxThumbnails';
+export * from './LightboxNavigation';
+export * from './LightboxCaption';
+export * from './LightboxCloseButton';
+export * from './LightboxProvider';
+export * from './lightbox.store';
+export * from './types';
+export { DEFAULT_LABELS } from './default-labels';

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from './Lightbox';
+export * from './LightboxRoot';
+export * from './LightboxToolbar';
+export * from './LightboxSlides';
+export * from './LightboxSlide';
+export * from './LightboxThumbnails';
+export * from './LightboxNavigation';
+export * from './LightboxCaption';
+export * from './LightboxCloseButton';
+export * from './LightboxProvider';
+export * from './lightbox.store';
+export * from './types';
+export { DEFAULT_LABELS } from './default-labels';

package/lib/lightbox.context.d.ts

@@ -0,0 +1,21 @@
+import type { EmblaOptionsType } from 'embla-carousel';
+import type { LightboxLabels, ToolbarItemsPayload } from './types';
+export interface LightboxContextValue extends ToolbarItemsPayload {
+    getStyles: (selector: string, options?: Record<string, any>) => Record<string, any>;
+    opened: boolean;
+    withZoom: boolean;
+    withThumbnails: boolean;
+    withFullscreen: boolean;
+    withDownload: boolean;
+    loop: boolean;
+    closeOnSwipeDown: boolean;
+    closeOnClickOutside: boolean;
+    withSlideTransition: boolean;
+    transitionDuration: number;
+    emblaOptions?: EmblaOptionsType;
+    labels: LightboxLabels;
+    zoomScale: number;
+    panZoom: (deltaX: number, deltaY: number) => boolean;
+    getImageZoomProps: () => Record<string, any>;
+}
+export declare const provideLightboxContext: (value: LightboxContextValue) => void, useLightboxContext: () => LightboxContextValue;

package/lib/lightbox.store.d.ts

@@ -0,0 +1,54 @@
+import type { LightboxSlideData } from './types';
+export interface LightboxState {
+    opened: boolean;
+    slides: LightboxSlideData[];
+    currentIndex: number;
+    loop: boolean;
+}
+export interface LightboxStore {
+    state: LightboxState;
+    getState: () => LightboxState;
+    setState: (state: LightboxState) => void;
+}
+export declare const createLightboxStore: () => LightboxStore;
+export declare const useLightboxStore: (store: LightboxStore) => LightboxState;
+export declare function updateLightboxStateAction(update: (state: LightboxState) => Partial<LightboxState>, store: LightboxStore): void;
+export declare const openLightboxAction: (payload: {
+    slides: LightboxSlideData[];
+    startIndex?: number;
+}, store: LightboxStore) => void;
+export declare const closeLightboxAction: (store: LightboxStore) => void;
+export declare const nextLightboxAction: (store: LightboxStore) => void;
+export declare const prevLightboxAction: (store: LightboxStore) => void;
+export declare const setLightboxIndexAction: (index: number, store: LightboxStore) => void;
+export declare const lightboxActions: {
+    open: (payload: {
+        slides: LightboxSlideData[];
+        startIndex?: number;
+    }, store: LightboxStore) => void;
+    close: (store: LightboxStore) => void;
+    next: (store: LightboxStore) => void;
+    prev: (store: LightboxStore) => void;
+    setIndex: (index: number, store: LightboxStore) => void;
+    updateState: typeof updateLightboxStateAction;
+};
+export declare function createLightbox(): readonly [LightboxStore, {
+    readonly open: (payload: {
+        slides: LightboxSlideData[];
+        startIndex?: number;
+    }) => void;
+    readonly close: () => void;
+    readonly next: () => void;
+    readonly prev: () => void;
+    readonly setIndex: (index: number) => void;
+}];
+export declare const lightboxStore: LightboxStore, lightbox: {
+    readonly open: (payload: {
+        slides: LightboxSlideData[];
+        startIndex?: number;
+    }) => void;
+    readonly close: () => void;
+    readonly next: () => void;
+    readonly prev: () => void;
+    readonly setIndex: (index: number) => void;
+};

package/lib/types.d.ts

@@ -0,0 +1,75 @@
+import type { Component, VNodeChild } from 'vue';
+export interface LightboxImageSlide {
+    type?: 'image';
+    src: string;
+    alt?: string;
+    thumbSrc?: string;
+    caption?: VNodeChild;
+    srcSet?: string;
+    sizes?: string;
+    loading?: 'eager' | 'lazy';
+}
+export interface LightboxVideoSlideTrack {
+    src: string;
+    kind?: string;
+    srcLang?: string;
+    label?: string;
+    default?: boolean;
+}
+export interface LightboxVideoSlide {
+    type: 'video';
+    src: string;
+    label?: string;
+    thumbSrc?: string;
+    caption?: VNodeChild;
+    autoPlay?: boolean;
+    poster?: string;
+    tracks?: LightboxVideoSlideTrack[];
+}
+export interface LightboxCustomSlide {
+    type: 'custom';
+    render: (props: {
+        active: boolean;
+    }) => VNodeChild;
+    renderThumb?: () => VNodeChild;
+    thumbSrc?: string;
+    caption?: VNodeChild;
+}
+export type LightboxSlideData = LightboxImageSlide | LightboxVideoSlide | LightboxCustomSlide;
+export interface LightboxLabels {
+    lightboxLabel: string;
+    slideLabel: (index: number, total: number) => string;
+    slidesLabel: string;
+    previousSlideLabel: string;
+    nextSlideLabel: string;
+    thumbnailLabel: (index: number, total: number) => string;
+    enterFullscreenLabel: string;
+    exitFullscreenLabel: string;
+    showThumbnailsLabel: string;
+    hideThumbnailsLabel: string;
+    downloadLabel: string;
+    closeLabel: string;
+}
+export interface ToolbarItem {
+    key: string;
+    icon: VNodeChild | Component;
+    label: string;
+    onClick: () => void;
+    position?: 'left' | 'right';
+}
+export interface ToolbarItemsPayload {
+    slides: LightboxSlideData[];
+    currentIndex: number;
+    setIndex: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+    close: () => void;
+    thumbnailsVisible: boolean;
+    toggleThumbnails: () => void;
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+    zoomed: boolean;
+    toggleZoom: () => void;
+    labels: LightboxLabels;
+}
+export type ToolbarItems = ToolbarItem[] | ((payload: ToolbarItemsPayload) => ToolbarItem[]);

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mantine-vue/lightbox",
+  "version": "3.3.0",
+  "description": "Full-screen media lightbox with carousel navigation for Vue",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
+  },
+  "devDependencies": {
+    "@mantine-vue/core": "workspace:*",
+    "@mantine-vue/hooks": "workspace:*",
+    "@vue/compiler-dom": "^3.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-vue": "^8.6.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@mantine-vue/core": "3.3.0",
+    "@mantine-vue/hooks": "3.3.0",
+    "embla-carousel": ">=8.0.0",
+    "embla-carousel-vue": ">=8.0.0",
+    "vue": "^3.5.0"
+  }
+}

package/styles.css

@@ -0,0 +1,201 @@
+._root_13vd4_1 {
+  --lightbox-transition-duration: 200ms;
+  --lightbox-overlay-color: rgba(0, 0, 0, 0.9);
+  --lightbox-z-index: 400;
+  --lightbox-toolbar-height: calc(3.5rem * var(--mantine-scale));
+  --lightbox-thumbnails-height: calc(6.25rem * var(--mantine-scale));
+  display: contents;
+}
+._overlay_13vd4_9 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lightbox-z-index);
+  background-color: var(--lightbox-overlay-color);
+}
+._content_13vd4_15 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lightbox-z-index);
+  display: flex;
+  flex-direction: column;
+  color: var(--mantine-color-white);
+  outline: none;
+}
+._toolbar_13vd4_24 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--lightbox-toolbar-height);
+  padding: 0 var(--mantine-spacing-md);
+  flex-shrink: 0;
+  z-index: 1;
+}
+._toolbarGroup_13vd4_33 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+}
+._toolbarButton_13vd4_38 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(2.5rem * var(--mantine-scale));
+  height: calc(2.5rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  transition:
+    opacity var(--lightbox-transition-duration) ease,
+    background-color var(--lightbox-transition-duration) ease;
+}
+._toolbarButton_13vd4_38:hover {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+._counter_13vd4_55 {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  user-select: none;
+}
+._slides_13vd4_61 {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+._slidesViewport_13vd4_67 {
+  height: 100%;
+  overflow: hidden;
+  touch-action: pan-y pinch-zoom;
+}
+._slidesContainer_13vd4_72 {
+  display: flex;
+  height: 100%;
+}
+._slide_13vd4_61 {
+  position: relative;
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-md);
+  min-width: 0;
+}
+._slideImage_13vd4_85 {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform var(--lightbox-transition-duration) ease;
+}
+._slideImage_13vd4_85[data-zoom-enabled] {
+    touch-action: none;
+  }
+._slideImage_13vd4_85[data-zoom-enabled]:not([data-zoomed]) {
+    cursor: zoom-in;
+  }
+._slideImage_13vd4_85[data-zoomed] {
+    cursor: grab;
+  }
+._slideImage_13vd4_85[data-zoomed]:active {
+      cursor: grabbing;
+    }
+._slideImage_13vd4_85[data-dragging] {
+    transition: none;
+  }
+._slideVideo_13vd4_108 {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+._thumbnails_13vd4_115 {
+  display: block;
+  padding: 0 var(--mantine-spacing-md);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+._thumbnailsViewport_13vd4_121 {
+  width: fit-content;
+  max-width: 100%;
+  margin-inline: auto;
+  height: var(--lightbox-thumbnails-height);
+  overflow: hidden;
+}
+._thumbnailsContainer_13vd4_128 {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+  height: 100%;
+  align-items: center;
+}
+._thumbnail_13vd4_115 {
+  flex: 0 0 auto;
+  width: calc(4rem * var(--mantine-scale));
+  height: calc(4rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  overflow: hidden;
+  opacity: 0.5;
+  border: calc(0.125rem * var(--mantine-scale)) solid transparent;
+  cursor: pointer;
+  transition:
+    opacity var(--lightbox-transition-duration) ease,
+    border-color var(--lightbox-transition-duration) ease;
+  padding: 0;
+  background: none;
+}
+._thumbnail_13vd4_115:hover {
+    opacity: 0.8;
+  }
+._thumbnail_13vd4_115[data-active] {
+    opacity: 1;
+    border-color: var(--mantine-primary-color-filled);
+  }
+._thumbnailImage_13vd4_156 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+._navigation_13vd4_161 {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--mantine-spacing-md);
+  pointer-events: none;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+._navigationButton_13vd4_172 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(3rem * var(--mantine-scale));
+  height: calc(3rem * var(--mantine-scale));
+  color: var(--mantine-color-white);
+  pointer-events: all;
+  opacity: 0.7;
+  transition: opacity var(--lightbox-transition-duration) ease;
+}
+._navigationButton_13vd4_172:hover {
+    opacity: 1;
+  }
+._navigationButton_13vd4_172[data-inactive] {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+._caption_13vd4_190 {
+  text-align: center;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+._closeButton_13vd4_198 {
+  color: var(--mantine-color-white);
+}
+/*$vite$:1*/