@mattermost/compass-ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/components/tour-point/TourPoint.css

@@ -1 +1 @@
-@keyframes _tour-point-panel-in_xtgrh_1{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes _tour-point-pulse-ring_xtgrh_1{0%{transform:scale(1);opacity:0}2.25%{opacity:.52}8.25%{opacity:.38}37.5%,to{transform:scale(4.25);opacity:0}}._tour-point_xtgrh_28{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;max-width:352px;min-width:280px}._tour-point__pointer_xtgrh_36{position:absolute;z-index:2;pointer-events:none;overflow:visible}._tour-point__pointer-triangle_xtgrh_42{position:relative;z-index:2;display:block;width:100%;height:100%;background-color:var(--button-bg)}._tour-point__pointer-pulse_xtgrh_50{position:absolute;z-index:0;width:40px;height:40px;pointer-events:none}._tour-point__pointer-pulse-ring_xtgrh_57{position:absolute;left:50%;top:50%;z-index:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:var(--radius-full);background-color:rgba(var(--color-success-rgb),.36);transform-origin:center center;animation:_tour-point-pulse-ring_xtgrh_1 calc(4 * var(--duration-moderate) + 40 * var(--duration-quick) / 3) linear infinite;will-change:transform,opacity}._tour-point__pointer-pulse-ring--delay_xtgrh_71{animation-delay:calc(2 * var(--duration-moderate))}@media(prefers-reduced-motion:reduce){._tour-point__pointer-pulse-ring_xtgrh_57{animation:none;opacity:0}}._tour-point__pointer-pulse-core_xtgrh_80{position:absolute;left:50%;top:50%;z-index:1;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:var(--radius-full);background-color:var(--color-success)}._tour-point__panel_xtgrh_91{position:relative;z-index:1;display:flex;flex-direction:column;border-radius:var(--radius-m);background-color:var(--button-bg);box-shadow:var(--elevation-4);animation:_tour-point-panel-in_xtgrh_1 var(--duration-quick) var(--ease-entrance) both}._tour-point--pointer-top-center_xtgrh_101 ._tour-point__panel_xtgrh_91,._tour-point--pointer-top-left_xtgrh_101 ._tour-point__panel_xtgrh_91,._tour-point--pointer-top-right_xtgrh_101 ._tour-point__panel_xtgrh_91{transform-origin:50% 0}._tour-point--pointer-bottom-center_xtgrh_104 ._tour-point__panel_xtgrh_91,._tour-point--pointer-bottom-left_xtgrh_104 ._tour-point__panel_xtgrh_91,._tour-point--pointer-bottom-right_xtgrh_104 ._tour-point__panel_xtgrh_91{transform-origin:50% 100%}._tour-point--pointer-left-center_xtgrh_107 ._tour-point__panel_xtgrh_91{transform-origin:0 50%}._tour-point--pointer-right-center_xtgrh_110 ._tour-point__panel_xtgrh_91{transform-origin:100% 50%}._tour-point__header_xtgrh_113{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-m);padding:var(--spacing-xl) var(--spacing-xl) 0}._tour-point_xtgrh_28 ._tour-point__panel_xtgrh_91 ._tour-point__header_xtgrh_113 ._tour-point__close_xtgrh_120{--focus-ring-color: var(--button-color);position:relative;top:-4px;right:-4px;color:color-mix(in srgb,var(--button-color) 64%,transparent)}._tour-point_xtgrh_28 ._tour-point__panel_xtgrh_91 ._tour-point__header_xtgrh_113 ._tour-point__close_xtgrh_120:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,var(--button-color) 8%,transparent);color:color-mix(in srgb,var(--button-color) 75%,transparent)}._tour-point_xtgrh_28 ._tour-point__panel_xtgrh_91 ._tour-point__header_xtgrh_113 ._tour-point__close_xtgrh_120:active:not(:disabled){background-color:color-mix(in srgb,var(--button-color) 20%,transparent)}._tour-point__title_xtgrh_134{margin:0;padding-right:var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--neutral-0)}._tour-point__body_xtgrh_143{display:flex;flex-direction:column;gap:var(--spacing-m);padding:var(--spacing-m) var(--spacing-xl) var(--spacing-xl)}._tour-point__description_xtgrh_149{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:color-mix(in srgb,var(--neutral-0) 92%,transparent)}._tour-point__media_xtgrh_155{border-radius:var(--radius-s);background-color:var(--color-blue-800);padding:var(--spacing-m);color:color-mix(in srgb,var(--neutral-0) 88%,transparent);font-size:var(--font-size-75);line-height:var(--line-height-100);border:1px solid color-mix(in srgb,var(--neutral-0) 20%,transparent)}._tour-point__media_xtgrh_155 img{display:block;width:100%;height:auto;border-radius:var(--radius-xs)}._tour-point__footer_xtgrh_170{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-l);padding:0 var(--spacing-xl) var(--spacing-xl)}._tour-point__footer-spacer_xtgrh_177{flex:1 0 0;min-width:0}._tour-point__progress_xtgrh_181,._tour-point__next-wrap_xtgrh_184{flex-shrink:0}._tour-point__next-wrap_xtgrh_184 button{--focus-ring-color: var(--neutral-0);background-color:var(--neutral-0);border-color:transparent;color:var(--button-bg);transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tour-point__next-wrap_xtgrh_184 button:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 92%,transparent)}._tour-point__next-wrap_xtgrh_184 button:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 86%,transparent)}._tour-point--pointer-top-center_xtgrh_101 ._tour-point__pointer_xtgrh_36{top:-9px;left:50%;width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-top-center_xtgrh_101 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-center_xtgrh_101 ._tour-point__pointer-pulse_xtgrh_50{left:50%;top:0;margin-left:-20px;margin-top:-20px}._tour-point--pointer-top-left_xtgrh_101 ._tour-point__pointer_xtgrh_36{top:-9px;left:var(--spacing-xl);width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-top-left_xtgrh_101 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-left_xtgrh_101 ._tour-point__pointer-pulse_xtgrh_50{left:50%;top:0;margin-left:-20px;margin-top:-20px}._tour-point--pointer-top-right_xtgrh_101 ._tour-point__pointer_xtgrh_36{top:-9px;right:var(--spacing-xl);width:18px;height:9px;transform:translate(50%)}._tour-point--pointer-top-right_xtgrh_101 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-right_xtgrh_101 ._tour-point__pointer-pulse_xtgrh_50{left:50%;top:0;margin-left:-20px;margin-top:-20px}._tour-point--pointer-bottom-center_xtgrh_104 ._tour-point__pointer_xtgrh_36{bottom:-9px;left:50%;width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-bottom-center_xtgrh_104 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-center_xtgrh_104 ._tour-point__pointer-pulse_xtgrh_50{left:50%;bottom:0;margin-left:-20px;margin-bottom:-20px}._tour-point--pointer-bottom-left_xtgrh_104 ._tour-point__pointer_xtgrh_36{bottom:-9px;left:var(--spacing-xl);width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-bottom-left_xtgrh_104 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-left_xtgrh_104 ._tour-point__pointer-pulse_xtgrh_50{left:50%;bottom:0;margin-left:-20px;margin-bottom:-20px}._tour-point--pointer-bottom-right_xtgrh_104 ._tour-point__pointer_xtgrh_36{bottom:-9px;right:var(--spacing-xl);width:18px;height:9px;transform:translate(50%)}._tour-point--pointer-bottom-right_xtgrh_104 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-right_xtgrh_104 ._tour-point__pointer-pulse_xtgrh_50{left:50%;bottom:0;margin-left:-20px;margin-bottom:-20px}._tour-point--pointer-left-center_xtgrh_107 ._tour-point__pointer_xtgrh_36{left:-9px;top:50%;width:9px;height:18px;transform:translateY(-50%)}._tour-point--pointer-left-center_xtgrh_107 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(0% 50%,100% 0%,100% 100%)}._tour-point--pointer-left-center_xtgrh_107 ._tour-point__pointer-pulse_xtgrh_50{left:0;top:50%;margin-left:-20px;margin-top:-20px}._tour-point--pointer-right-center_xtgrh_110 ._tour-point__pointer_xtgrh_36{right:-9px;top:50%;width:9px;height:18px;transform:translateY(-50%)}._tour-point--pointer-right-center_xtgrh_110 ._tour-point__pointer-triangle_xtgrh_42{clip-path:polygon(100% 50%,0% 0%,0% 100%)}._tour-point--pointer-right-center_xtgrh_110 ._tour-point__pointer-pulse_xtgrh_50{right:0;top:50%;margin-right:-20px;margin-top:-20px}
+@keyframes _tour-point-panel-in_rs15y_1{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes _tour-point-pulse-ring_rs15y_1{0%{transform:scale(1);opacity:0}2.25%{opacity:.52}8.25%{opacity:.38}37.5%,to{transform:scale(4.25);opacity:0}}._tour-point_rs15y_28{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;max-width:352px;min-width:280px}._tour-point__pointer_rs15y_36{position:absolute;z-index:2;pointer-events:none;overflow:visible}._tour-point__pointer-triangle_rs15y_42{position:relative;z-index:2;display:block;width:100%;height:100%;background-color:var(--button-bg)}._tour-point__pointer-pulse_rs15y_50{position:absolute;z-index:0;width:40px;height:40px;pointer-events:none}._tour-point__pointer-pulse-ring_rs15y_57{position:absolute;left:50%;top:50%;z-index:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:var(--radius-pill);background-color:rgba(var(--color-success-rgb),.36);transform-origin:center center;animation:_tour-point-pulse-ring_rs15y_1 calc(4 * var(--duration-moderate) + 40 * var(--duration-quick) / 3) linear infinite;will-change:transform,opacity}._tour-point__pointer-pulse-ring--delay_rs15y_71{animation-delay:calc(2 * var(--duration-moderate))}@media(prefers-reduced-motion:reduce){._tour-point__pointer-pulse-ring_rs15y_57{animation:none;opacity:0}}._tour-point__pointer-pulse-core_rs15y_80{position:absolute;left:50%;top:50%;z-index:1;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:var(--radius-pill);background-color:var(--color-success)}._tour-point__panel_rs15y_91{position:relative;z-index:1;display:flex;flex-direction:column;border-radius:var(--radius-m);background-color:var(--button-bg);box-shadow:var(--elevation-4);animation:_tour-point-panel-in_rs15y_1 var(--duration-quick) var(--ease-entrance) both}._tour-point--pointer-top-center_rs15y_101 ._tour-point__panel_rs15y_91,._tour-point--pointer-top-left_rs15y_101 ._tour-point__panel_rs15y_91,._tour-point--pointer-top-right_rs15y_101 ._tour-point__panel_rs15y_91{transform-origin:50% 0}._tour-point--pointer-bottom-center_rs15y_104 ._tour-point__panel_rs15y_91,._tour-point--pointer-bottom-left_rs15y_104 ._tour-point__panel_rs15y_91,._tour-point--pointer-bottom-right_rs15y_104 ._tour-point__panel_rs15y_91{transform-origin:50% 100%}._tour-point--pointer-left-center_rs15y_107 ._tour-point__panel_rs15y_91{transform-origin:0 50%}._tour-point--pointer-right-center_rs15y_110 ._tour-point__panel_rs15y_91{transform-origin:100% 50%}._tour-point__header_rs15y_113{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-m);padding:var(--spacing-xl) var(--spacing-xl) 0}._tour-point_rs15y_28 ._tour-point__panel_rs15y_91 ._tour-point__header_rs15y_113 ._tour-point__close_rs15y_120{--focus-ring-color: var(--button-color);position:relative;top:-4px;right:-4px;color:color-mix(in srgb,var(--button-color) 64%,transparent)}._tour-point_rs15y_28 ._tour-point__panel_rs15y_91 ._tour-point__header_rs15y_113 ._tour-point__close_rs15y_120:hover:not(:disabled):not(:active){background-color:color-mix(in srgb,var(--button-color) 8%,transparent);color:color-mix(in srgb,var(--button-color) 75%,transparent)}._tour-point_rs15y_28 ._tour-point__panel_rs15y_91 ._tour-point__header_rs15y_113 ._tour-point__close_rs15y_120:active:not(:disabled){background-color:color-mix(in srgb,var(--button-color) 20%,transparent)}._tour-point__title_rs15y_134{margin:0;padding-right:var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--neutral-0)}._tour-point__body_rs15y_143{display:flex;flex-direction:column;gap:var(--spacing-m);padding:var(--spacing-m) var(--spacing-xl) var(--spacing-xl)}._tour-point__description_rs15y_149{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:color-mix(in srgb,var(--neutral-0) 92%,transparent)}._tour-point__media_rs15y_155{border-radius:var(--radius-s);background-color:var(--color-blue-800);padding:var(--spacing-m);color:color-mix(in srgb,var(--neutral-0) 88%,transparent);font-size:var(--font-size-75);line-height:var(--line-height-100);border:1px solid color-mix(in srgb,var(--neutral-0) 20%,transparent)}._tour-point__media_rs15y_155 img{display:block;width:100%;height:auto;border-radius:var(--radius-xs)}._tour-point__footer_rs15y_170{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-l);padding:0 var(--spacing-xl) var(--spacing-xl)}._tour-point__footer-spacer_rs15y_177{flex:1 0 0;min-width:0}._tour-point__progress_rs15y_181,._tour-point__next-wrap_rs15y_184{flex-shrink:0}._tour-point__next-wrap_rs15y_184 button{--focus-ring-color: var(--neutral-0);background-color:var(--neutral-0);border-color:transparent;color:var(--button-bg);transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tour-point__next-wrap_rs15y_184 button:hover:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 92%,transparent)}._tour-point__next-wrap_rs15y_184 button:active:not(:disabled){background-color:color-mix(in srgb,var(--neutral-0) 86%,transparent)}._tour-point--pointer-top-center_rs15y_101 ._tour-point__pointer_rs15y_36{top:-9px;left:50%;width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-top-center_rs15y_101 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-center_rs15y_101 ._tour-point__pointer-pulse_rs15y_50{left:50%;top:0;margin-left:-20px;margin-top:-20px}._tour-point--pointer-top-left_rs15y_101 ._tour-point__pointer_rs15y_36{top:-9px;left:var(--spacing-xl);width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-top-left_rs15y_101 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-left_rs15y_101 ._tour-point__pointer-pulse_rs15y_50{left:50%;top:0;margin-left:-20px;margin-top:-20px}._tour-point--pointer-top-right_rs15y_101 ._tour-point__pointer_rs15y_36{top:-9px;right:var(--spacing-xl);width:18px;height:9px;transform:translate(50%)}._tour-point--pointer-top-right_rs15y_101 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(50% 0%,0% 100%,100% 100%)}._tour-point--pointer-top-right_rs15y_101 ._tour-point__pointer-pulse_rs15y_50{left:50%;top:0;margin-left:-20px;margin-top:-20px}._tour-point--pointer-bottom-center_rs15y_104 ._tour-point__pointer_rs15y_36{bottom:-9px;left:50%;width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-bottom-center_rs15y_104 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-center_rs15y_104 ._tour-point__pointer-pulse_rs15y_50{left:50%;bottom:0;margin-left:-20px;margin-bottom:-20px}._tour-point--pointer-bottom-left_rs15y_104 ._tour-point__pointer_rs15y_36{bottom:-9px;left:var(--spacing-xl);width:18px;height:9px;transform:translate(-50%)}._tour-point--pointer-bottom-left_rs15y_104 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-left_rs15y_104 ._tour-point__pointer-pulse_rs15y_50{left:50%;bottom:0;margin-left:-20px;margin-bottom:-20px}._tour-point--pointer-bottom-right_rs15y_104 ._tour-point__pointer_rs15y_36{bottom:-9px;right:var(--spacing-xl);width:18px;height:9px;transform:translate(50%)}._tour-point--pointer-bottom-right_rs15y_104 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(50% 100%,0% 0%,100% 0%)}._tour-point--pointer-bottom-right_rs15y_104 ._tour-point__pointer-pulse_rs15y_50{left:50%;bottom:0;margin-left:-20px;margin-bottom:-20px}._tour-point--pointer-left-center_rs15y_107 ._tour-point__pointer_rs15y_36{left:-9px;top:50%;width:9px;height:18px;transform:translateY(-50%)}._tour-point--pointer-left-center_rs15y_107 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(0% 50%,100% 0%,100% 100%)}._tour-point--pointer-left-center_rs15y_107 ._tour-point__pointer-pulse_rs15y_50{left:0;top:50%;margin-left:-20px;margin-top:-20px}._tour-point--pointer-right-center_rs15y_110 ._tour-point__pointer_rs15y_36{right:-9px;top:50%;width:9px;height:18px;transform:translateY(-50%)}._tour-point--pointer-right-center_rs15y_110 ._tour-point__pointer-triangle_rs15y_42{clip-path:polygon(100% 50%,0% 0%,0% 100%)}._tour-point--pointer-right-center_rs15y_110 ._tour-point__pointer-pulse_rs15y_50{right:0;top:50%;margin-right:-20px;margin-top:-20px}

package/dist/components/tour-point/TourPoint.d.ts

@@ -1,16 +1,26 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type TourPointPointerPosition = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left-center' | 'right-center';
 export interface TourPointProgress {
     pages: number;
     activePage: number;
     onPageChange?: (page: number) => void;
+    /** Accessible name for the step dots. Default: "Pages". */
+    label?: string;
+    /** Accessible name for each step dot. Default: `Page {page}`. */
+    formatPageLabel?: (page: number) => string;
 }
 export interface TourPointPrimaryAction {
-    label: string;
+    /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     onClick?: () => void;
+    disabled?: boolean;
+    /** Shows a spinner in the button and disables it. */
+    loading?: boolean;
 }
-export interface TourPointProps {
-    title: string;
+export interface TourPointProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Tour step heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
     children: ReactNode;
     /** Optional image between body copy and footer (e.g. screenshot as an img). */
     media?: ReactNode;
@@ -23,9 +33,13 @@ export interface TourPointProps {
      */
     showPulsingDot?: boolean;
     onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
     progress?: TourPointProgress;
     primaryAction?: TourPointPrimaryAction;
     className?: string;
 }
-export default function TourPoint({ title, children, media, pointerPosition, showPulsingDot, onClose, progress, primaryAction, className, }: TourPointProps): import("react/jsx-runtime").JSX.Element;
+export default function TourPoint({ title, children, media, pointerPosition, showPulsingDot, onClose, closeLabel, closeButtonProps, progress, primaryAction, className, ...rest }: TourPointProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TourPoint.d.ts.map

package/dist/components/tour-point/TourPoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourPoint.d.ts","sourceRoot":"","sources":["../../../src/components/tour-point/TourPoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,wBAAwB,GAChC,YAAY,GACZ,UAAU,GACV,WAAW,GACX,eAAe,GACf,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,eAAe,CAAC,EAAE,wBAAwB,GAAG,MAAM,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,eAA8B,EAC9B,cAAqB,EACrB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,SAAc,GACf,EAAE,cAAc,2CA2FhB"}
+{"version":3,"file":"TourPoint.d.ts","sourceRoot":"","sources":["../../../src/components/tour-point/TourPoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,wBAAwB,GAChC,YAAY,GACZ,UAAU,GACV,WAAW,GACX,eAAe,GACf,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C;AAED,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,eAAe,CAAC,EAAE,wBAAwB,GAAG,MAAM,CAAC;IACpD;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,eAA8B,EAC9B,cAAqB,EACrB,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,SAAc,EACd,GAAG,IAAI,EACR,EAAE,cAAc,2CAmGhB"}

package/dist/components/tour-point/TourPoint.js

@@ -1,86 +1,98 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import __f from "@mattermost/compass-icons/components/close.js";const f=__f&&__f.default?__f.default:__f;
-import __g from "@mattermost/compass-icons/components/chevron-right.js";const g=__g&&__g.default?__g.default:__g;
-import v from "../button/Button.js";
-import p from "../icon/Icon.js";
-import C from "../icon-button/IconButton.js";
-import y from "../pagination-dots/PaginationDots.js";
-import { toKebab as P } from "../../utils/string.js";
-import o from "./TourPoint.module.scss.js";
-function F({
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import __v from "@mattermost/compass-icons/components/close.js";const v=__v&&__v.default?__v.default:__v;
+import __C from "@mattermost/compass-icons/components/chevron-right.js";const C=__C&&__C.default?__C.default:__C;
+import I from "../button/Button.js";
+import m from "../icon/Icon.js";
+import j from "../icon-button/IconButton.js";
+import x from "../pagination-dots/PaginationDots.js";
+import { mergeClassNames as y } from "../../utils/props.js";
+import { toKebab as z } from "../../utils/string.js";
+import e from "./TourPoint.module.scss.js";
+function T({
   title: c,
-  children: u,
-  media: a,
+  children: d,
+  media: l,
   pointerPosition: r = "top-center",
-  showPulsingDot: m = !0,
-  onClose: l,
-  progress: n,
-  primaryAction: i,
-  className: _ = ""
+  showPulsingDot: u = !0,
+  onClose: s,
+  closeLabel: _ = "Close",
+  closeButtonProps: t,
+  progress: a,
+  primaryAction: n,
+  className: h = "",
+  ...N
 }) {
-  const s = r !== "none", d = s && o[`tour-point--pointer-${P(r)}`], h = [o["tour-point"], d, _].filter(Boolean).join(" "), N = n != null || i != null;
-  return /* @__PURE__ */ e("div", { className: h, children: [
-    s && /* @__PURE__ */ e("span", { className: o["tour-point__pointer"], "aria-hidden": !0, children: [
-      /* @__PURE__ */ t("span", { className: o["tour-point__pointer-triangle"] }),
-      m && /* @__PURE__ */ e("span", { className: o["tour-point__pointer-pulse"], children: [
-        /* @__PURE__ */ t("span", { className: o["tour-point__pointer-pulse-ring"] }),
-        /* @__PURE__ */ t(
+  const p = r !== "none", f = p && e[`tour-point--pointer-${z(r)}`], g = [e["tour-point"], f, h].filter(Boolean).join(" "), b = a != null || n != null;
+  return /* @__PURE__ */ i("div", { ...N, className: g, children: [
+    p && /* @__PURE__ */ i("span", { className: e["tour-point__pointer"], "aria-hidden": !0, children: [
+      /* @__PURE__ */ o("span", { className: e["tour-point__pointer-triangle"] }),
+      u && /* @__PURE__ */ i("span", { className: e["tour-point__pointer-pulse"], children: [
+        /* @__PURE__ */ o("span", { className: e["tour-point__pointer-pulse-ring"] }),
+        /* @__PURE__ */ o(
           "span",
           {
             className: [
-              o["tour-point__pointer-pulse-ring"],
-              o["tour-point__pointer-pulse-ring--delay"]
+              e["tour-point__pointer-pulse-ring"],
+              e["tour-point__pointer-pulse-ring--delay"]
             ].join(" ")
           }
         ),
-        /* @__PURE__ */ t("span", { className: o["tour-point__pointer-pulse-core"] })
+        /* @__PURE__ */ o("span", { className: e["tour-point__pointer-pulse-core"] })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: o["tour-point__panel"], children: [
-      /* @__PURE__ */ e("div", { className: o["tour-point__header"], children: [
-        /* @__PURE__ */ t("h2", { className: o["tour-point__title"], children: c }),
-        l && /* @__PURE__ */ t(
-          C,
+    /* @__PURE__ */ i("div", { className: e["tour-point__panel"], children: [
+      /* @__PURE__ */ i("div", { className: e["tour-point__header"], children: [
+        /* @__PURE__ */ o("h2", { className: e["tour-point__title"], children: c }),
+        s && /* @__PURE__ */ o(
+          j,
           {
-            className: o["tour-point__close"],
-            "aria-label": "Close",
+            ...t,
+            className: y(
+              e["tour-point__close"],
+              t == null ? void 0 : t.className
+            ),
+            "aria-label": _,
             size: "small",
             padding: "compact",
             style: "default",
-            icon: /* @__PURE__ */ t(p, { size: "16", glyph: /* @__PURE__ */ t(f, {}) }),
-            onClick: l
+            icon: /* @__PURE__ */ o(m, { size: "16", glyph: /* @__PURE__ */ o(v, {}) }),
+            onClick: s
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: o["tour-point__body"], children: [
-        /* @__PURE__ */ t("div", { className: o["tour-point__description"], children: u }),
-        a != null && /* @__PURE__ */ t("div", { className: o["tour-point__media"], children: a })
+      /* @__PURE__ */ i("div", { className: e["tour-point__body"], children: [
+        /* @__PURE__ */ o("div", { className: e["tour-point__description"], children: d }),
+        l != null && /* @__PURE__ */ o("div", { className: e["tour-point__media"], children: l })
       ] }),
-      N && /* @__PURE__ */ e("div", { className: o["tour-point__footer"], children: [
-        n != null ? /* @__PURE__ */ t(
-          y,
+      b && /* @__PURE__ */ i("div", { className: e["tour-point__footer"], children: [
+        a != null ? /* @__PURE__ */ o(
+          x,
           {
-            className: o["tour-point__progress"],
-            pages: n.pages,
-            activePage: n.activePage,
+            className: e["tour-point__progress"],
+            pages: a.pages,
+            activePage: a.activePage,
             dotStyle: "on-primary",
-            onPageChange: n.onPageChange
+            onPageChange: a.onPageChange,
+            label: a.label,
+            formatPageLabel: a.formatPageLabel
           }
-        ) : /* @__PURE__ */ t(
+        ) : /* @__PURE__ */ o(
           "span",
           {
-            className: o["tour-point__footer-spacer"],
+            className: e["tour-point__footer-spacer"],
             "aria-hidden": !0
           }
         ),
-        i != null ? /* @__PURE__ */ t("div", { className: o["tour-point__next-wrap"], children: /* @__PURE__ */ t(
-          v,
+        n != null ? /* @__PURE__ */ o("div", { className: e["tour-point__next-wrap"], children: /* @__PURE__ */ o(
+          I,
           {
             emphasis: "primary",
             size: "small",
-            trailingIcon: /* @__PURE__ */ t(p, { size: "16", glyph: /* @__PURE__ */ t(g, {}) }),
-            onClick: i.onClick,
-            children: i.label
+            trailingIcon: /* @__PURE__ */ o(m, { size: "16", glyph: /* @__PURE__ */ o(C, {}) }),
+            disabled: n.disabled,
+            loading: n.loading,
+            onClick: n.onClick,
+            children: n.label
           }
         ) }) : null
       ] })
@@ -88,6 +100,6 @@ function F({
   ] });
 }
 export {
-  F as default
+  T as default
 };
 //# sourceMappingURL=TourPoint.js.map

package/dist/components/tour-point/TourPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourPoint.js","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n}\n\nexport interface TourPointPrimaryAction {\n  label: string;\n  onClick?: () => void;\n}\n\nexport interface TourPointProps {\n  title: string;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  progress,\n  primaryAction,\n  className = '',\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[\n      `tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`\n    ];\n\n  const rootClass = [styles['tour-point'], pointerModifier, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              className={styles['tour-point__close']}\n              aria-label=\"Close\"\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n              />\n            ) : (\n              <span\n                className={styles['tour-point__footer-spacer']}\n                aria-hidden\n              />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={<Icon size=\"16\" glyph={<ChevronRightIcon />} />}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","progress","primaryAction","className","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"TourPoint.js","sources":["../../../src/components/tour-point/TourPoint.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport PaginationDots from '@/components/pagination-dots/PaginationDots';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './TourPoint.module.scss';\n\nexport type TourPointPointerPosition =\n  | 'top-center'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'left-center'\n  | 'right-center';\n\nexport interface TourPointProgress {\n  pages: number;\n  activePage: number;\n  onPageChange?: (page: number) => void;\n  /** Accessible name for the step dots. Default: \"Pages\". */\n  label?: string;\n  /** Accessible name for each step dot. Default: `Page {page}`. */\n  formatPageLabel?: (page: number) => string;\n}\n\nexport interface TourPointPrimaryAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface TourPointProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Tour step heading. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  children: ReactNode;\n  /** Optional image between body copy and footer (e.g. screenshot as an img). */\n  media?: ReactNode;\n  /** Where the pointer sits on the card edge; omit or `none` to hide the pointer. */\n  pointerPosition?: TourPointPointerPosition | 'none';\n  /**\n   * Animated marker at the arrow tip (Figma Pulsing Dot). Only applies when a\n   * pointer is shown. Default on; set false for reduced motion preference at the\n   * callsite or a static tour step.\n   */\n  showPulsingDot?: boolean;\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  progress?: TourPointProgress;\n  primaryAction?: TourPointPrimaryAction;\n  className?: string;\n}\n\nexport default function TourPoint({\n  title,\n  children,\n  media,\n  pointerPosition = 'top-center',\n  showPulsingDot = true,\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  progress,\n  primaryAction,\n  className = '',\n  ...rest\n}: TourPointProps) {\n  const showPointer = pointerPosition !== 'none';\n  const pointerModifier =\n    showPointer &&\n    styles[\n      `tour-point--pointer-${toKebab(pointerPosition as TourPointPointerPosition)}`\n    ];\n\n  const rootClass = [styles['tour-point'], pointerModifier, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const showFooter = progress != null || primaryAction != null;\n\n  return (\n    <div {...rest} className={rootClass}>\n      {showPointer && (\n        <span className={styles['tour-point__pointer']} aria-hidden>\n          <span className={styles['tour-point__pointer-triangle']} />\n          {showPulsingDot && (\n            <span className={styles['tour-point__pointer-pulse']}>\n              <span className={styles['tour-point__pointer-pulse-ring']} />\n              <span\n                className={[\n                  styles['tour-point__pointer-pulse-ring'],\n                  styles['tour-point__pointer-pulse-ring--delay'],\n                ].join(' ')}\n              />\n              <span className={styles['tour-point__pointer-pulse-core']} />\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={styles['tour-point__panel']}>\n        <div className={styles['tour-point__header']}>\n          <h2 className={styles['tour-point__title']}>{title}</h2>\n          {onClose && (\n            <IconButton\n              {...closeButtonProps}\n              className={mergeClassNames(\n                styles['tour-point__close'],\n                closeButtonProps?.className,\n              )}\n              aria-label={closeLabel}\n              size=\"small\"\n              padding=\"compact\"\n              style=\"default\"\n              icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n              onClick={onClose}\n            />\n          )}\n        </div>\n\n        <div className={styles['tour-point__body']}>\n          <div className={styles['tour-point__description']}>{children}</div>\n          {media != null && (\n            <div className={styles['tour-point__media']}>{media}</div>\n          )}\n        </div>\n\n        {showFooter && (\n          <div className={styles['tour-point__footer']}>\n            {progress != null ? (\n              <PaginationDots\n                className={styles['tour-point__progress']}\n                pages={progress.pages}\n                activePage={progress.activePage}\n                dotStyle=\"on-primary\"\n                onPageChange={progress.onPageChange}\n                label={progress.label}\n                formatPageLabel={progress.formatPageLabel}\n              />\n            ) : (\n              <span\n                className={styles['tour-point__footer-spacer']}\n                aria-hidden\n              />\n            )}\n\n            {primaryAction != null ? (\n              <div className={styles['tour-point__next-wrap']}>\n                <Button\n                  emphasis=\"primary\"\n                  size=\"small\"\n                  trailingIcon={<Icon size=\"16\" glyph={<ChevronRightIcon />} />}\n                  disabled={primaryAction.disabled}\n                  loading={primaryAction.loading}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TourPoint","title","children","media","pointerPosition","showPulsingDot","onClose","closeLabel","closeButtonProps","progress","primaryAction","className","rest","showPointer","pointerModifier","styles","toKebab","rootClass","showFooter","jsxs","jsx","IconButton","mergeClassNames","Icon","CloseIcon","PaginationDots","Button","ChevronRightIcon"],"mappings":"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"}

package/dist/components/tour-point/TourPoint.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TourPoint.css');const t={"tour-point":"_tour-point_xtgrh_28","tour-point__pointer":"_tour-point__pointer_xtgrh_36","tour-point__pointer-triangle":"_tour-point__pointer-triangle_xtgrh_42","tour-point__pointer-pulse":"_tour-point__pointer-pulse_xtgrh_50","tour-point__pointer-pulse-ring":"_tour-point__pointer-pulse-ring_xtgrh_57","tour-point-pulse-ring":"_tour-point-pulse-ring_xtgrh_1","tour-point__pointer-pulse-ring--delay":"_tour-point__pointer-pulse-ring--delay_xtgrh_71","tour-point__pointer-pulse-core":"_tour-point__pointer-pulse-core_xtgrh_80","tour-point__panel":"_tour-point__panel_xtgrh_91","tour-point-panel-in":"_tour-point-panel-in_xtgrh_1","tour-point--pointer-top-center":"_tour-point--pointer-top-center_xtgrh_101","tour-point--pointer-top-left":"_tour-point--pointer-top-left_xtgrh_101","tour-point--pointer-top-right":"_tour-point--pointer-top-right_xtgrh_101","tour-point--pointer-bottom-center":"_tour-point--pointer-bottom-center_xtgrh_104","tour-point--pointer-bottom-left":"_tour-point--pointer-bottom-left_xtgrh_104","tour-point--pointer-bottom-right":"_tour-point--pointer-bottom-right_xtgrh_104","tour-point--pointer-left-center":"_tour-point--pointer-left-center_xtgrh_107","tour-point--pointer-right-center":"_tour-point--pointer-right-center_xtgrh_110","tour-point__header":"_tour-point__header_xtgrh_113","tour-point__close":"_tour-point__close_xtgrh_120","tour-point__title":"_tour-point__title_xtgrh_134","tour-point__body":"_tour-point__body_xtgrh_143","tour-point__description":"_tour-point__description_xtgrh_149","tour-point__media":"_tour-point__media_xtgrh_155","tour-point__footer":"_tour-point__footer_xtgrh_170","tour-point__footer-spacer":"_tour-point__footer-spacer_xtgrh_177","tour-point__progress":"_tour-point__progress_xtgrh_181","tour-point__next-wrap":"_tour-point__next-wrap_xtgrh_184"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TourPoint.css');const t={"tour-point":"_tour-point_rs15y_28","tour-point__pointer":"_tour-point__pointer_rs15y_36","tour-point__pointer-triangle":"_tour-point__pointer-triangle_rs15y_42","tour-point__pointer-pulse":"_tour-point__pointer-pulse_rs15y_50","tour-point__pointer-pulse-ring":"_tour-point__pointer-pulse-ring_rs15y_57","tour-point-pulse-ring":"_tour-point-pulse-ring_rs15y_1","tour-point__pointer-pulse-ring--delay":"_tour-point__pointer-pulse-ring--delay_rs15y_71","tour-point__pointer-pulse-core":"_tour-point__pointer-pulse-core_rs15y_80","tour-point__panel":"_tour-point__panel_rs15y_91","tour-point-panel-in":"_tour-point-panel-in_rs15y_1","tour-point--pointer-top-center":"_tour-point--pointer-top-center_rs15y_101","tour-point--pointer-top-left":"_tour-point--pointer-top-left_rs15y_101","tour-point--pointer-top-right":"_tour-point--pointer-top-right_rs15y_101","tour-point--pointer-bottom-center":"_tour-point--pointer-bottom-center_rs15y_104","tour-point--pointer-bottom-left":"_tour-point--pointer-bottom-left_rs15y_104","tour-point--pointer-bottom-right":"_tour-point--pointer-bottom-right_rs15y_104","tour-point--pointer-left-center":"_tour-point--pointer-left-center_rs15y_107","tour-point--pointer-right-center":"_tour-point--pointer-right-center_rs15y_110","tour-point__header":"_tour-point__header_rs15y_113","tour-point__close":"_tour-point__close_rs15y_120","tour-point__title":"_tour-point__title_rs15y_134","tour-point__body":"_tour-point__body_rs15y_143","tour-point__description":"_tour-point__description_rs15y_149","tour-point__media":"_tour-point__media_rs15y_155","tour-point__footer":"_tour-point__footer_rs15y_170","tour-point__footer-spacer":"_tour-point__footer-spacer_rs15y_177","tour-point__progress":"_tour-point__progress_rs15y_181","tour-point__next-wrap":"_tour-point__next-wrap_rs15y_184"};exports.default=t;
 //# sourceMappingURL=TourPoint.module.scss.cjs.map

package/dist/components/tour-point/TourPoint.module.scss.js

@@ -1,32 +1,32 @@
 import './TourPoint.css';const t = {
-  "tour-point": "_tour-point_xtgrh_28",
-  "tour-point__pointer": "_tour-point__pointer_xtgrh_36",
-  "tour-point__pointer-triangle": "_tour-point__pointer-triangle_xtgrh_42",
-  "tour-point__pointer-pulse": "_tour-point__pointer-pulse_xtgrh_50",
-  "tour-point__pointer-pulse-ring": "_tour-point__pointer-pulse-ring_xtgrh_57",
-  "tour-point-pulse-ring": "_tour-point-pulse-ring_xtgrh_1",
-  "tour-point__pointer-pulse-ring--delay": "_tour-point__pointer-pulse-ring--delay_xtgrh_71",
-  "tour-point__pointer-pulse-core": "_tour-point__pointer-pulse-core_xtgrh_80",
-  "tour-point__panel": "_tour-point__panel_xtgrh_91",
-  "tour-point-panel-in": "_tour-point-panel-in_xtgrh_1",
-  "tour-point--pointer-top-center": "_tour-point--pointer-top-center_xtgrh_101",
-  "tour-point--pointer-top-left": "_tour-point--pointer-top-left_xtgrh_101",
-  "tour-point--pointer-top-right": "_tour-point--pointer-top-right_xtgrh_101",
-  "tour-point--pointer-bottom-center": "_tour-point--pointer-bottom-center_xtgrh_104",
-  "tour-point--pointer-bottom-left": "_tour-point--pointer-bottom-left_xtgrh_104",
-  "tour-point--pointer-bottom-right": "_tour-point--pointer-bottom-right_xtgrh_104",
-  "tour-point--pointer-left-center": "_tour-point--pointer-left-center_xtgrh_107",
-  "tour-point--pointer-right-center": "_tour-point--pointer-right-center_xtgrh_110",
-  "tour-point__header": "_tour-point__header_xtgrh_113",
-  "tour-point__close": "_tour-point__close_xtgrh_120",
-  "tour-point__title": "_tour-point__title_xtgrh_134",
-  "tour-point__body": "_tour-point__body_xtgrh_143",
-  "tour-point__description": "_tour-point__description_xtgrh_149",
-  "tour-point__media": "_tour-point__media_xtgrh_155",
-  "tour-point__footer": "_tour-point__footer_xtgrh_170",
-  "tour-point__footer-spacer": "_tour-point__footer-spacer_xtgrh_177",
-  "tour-point__progress": "_tour-point__progress_xtgrh_181",
-  "tour-point__next-wrap": "_tour-point__next-wrap_xtgrh_184"
+  "tour-point": "_tour-point_rs15y_28",
+  "tour-point__pointer": "_tour-point__pointer_rs15y_36",
+  "tour-point__pointer-triangle": "_tour-point__pointer-triangle_rs15y_42",
+  "tour-point__pointer-pulse": "_tour-point__pointer-pulse_rs15y_50",
+  "tour-point__pointer-pulse-ring": "_tour-point__pointer-pulse-ring_rs15y_57",
+  "tour-point-pulse-ring": "_tour-point-pulse-ring_rs15y_1",
+  "tour-point__pointer-pulse-ring--delay": "_tour-point__pointer-pulse-ring--delay_rs15y_71",
+  "tour-point__pointer-pulse-core": "_tour-point__pointer-pulse-core_rs15y_80",
+  "tour-point__panel": "_tour-point__panel_rs15y_91",
+  "tour-point-panel-in": "_tour-point-panel-in_rs15y_1",
+  "tour-point--pointer-top-center": "_tour-point--pointer-top-center_rs15y_101",
+  "tour-point--pointer-top-left": "_tour-point--pointer-top-left_rs15y_101",
+  "tour-point--pointer-top-right": "_tour-point--pointer-top-right_rs15y_101",
+  "tour-point--pointer-bottom-center": "_tour-point--pointer-bottom-center_rs15y_104",
+  "tour-point--pointer-bottom-left": "_tour-point--pointer-bottom-left_rs15y_104",
+  "tour-point--pointer-bottom-right": "_tour-point--pointer-bottom-right_rs15y_104",
+  "tour-point--pointer-left-center": "_tour-point--pointer-left-center_rs15y_107",
+  "tour-point--pointer-right-center": "_tour-point--pointer-right-center_rs15y_110",
+  "tour-point__header": "_tour-point__header_rs15y_113",
+  "tour-point__close": "_tour-point__close_rs15y_120",
+  "tour-point__title": "_tour-point__title_rs15y_134",
+  "tour-point__body": "_tour-point__body_rs15y_143",
+  "tour-point__description": "_tour-point__description_rs15y_149",
+  "tour-point__media": "_tour-point__media_rs15y_155",
+  "tour-point__footer": "_tour-point__footer_rs15y_170",
+  "tour-point__footer-spacer": "_tour-point__footer-spacer_rs15y_177",
+  "tour-point__progress": "_tour-point__progress_rs15y_181",
+  "tour-point__next-wrap": "_tour-point__next-wrap_rs15y_184"
 };
 export {
   t as default

package/dist/components/unread-badge/UnreadBadge.css

@@ -1 +1 @@
-._unread-badge_1a64l_2{display:inline-block;flex-shrink:0;border-radius:var(--radius-full)}._unread-badge--size-6_1a64l_7{width:6px;height:6px}._unread-badge--size-8_1a64l_11{width:8px;height:8px}._unread-badge--context-team-icon_1a64l_15{background-color:var(--mention-bg)}._unread-badge--context-icon-button_1a64l_18{background-color:var(--button-bg)}
+._unread-badge_1i73f_2{display:inline-block;flex-shrink:0;border-radius:var(--radius-pill)}._unread-badge--size-6_1i73f_7{width:6px;height:6px}._unread-badge--size-8_1i73f_11{width:8px;height:8px}._unread-badge--context-team-icon_1i73f_15{background-color:var(--mention-bg)}._unread-badge--context-icon-button_1i73f_18{background-color:var(--button-bg)}

package/dist/components/unread-badge/UnreadBadge.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UnreadBadge.css');const e={"unread-badge":"_unread-badge_1a64l_2","unread-badge--size-6":"_unread-badge--size-6_1a64l_7","unread-badge--size-8":"_unread-badge--size-8_1a64l_11","unread-badge--context-team-icon":"_unread-badge--context-team-icon_1a64l_15","unread-badge--context-icon-button":"_unread-badge--context-icon-button_1a64l_18"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UnreadBadge.css');const e={"unread-badge":"_unread-badge_1i73f_2","unread-badge--size-6":"_unread-badge--size-6_1i73f_7","unread-badge--size-8":"_unread-badge--size-8_1i73f_11","unread-badge--context-team-icon":"_unread-badge--context-team-icon_1i73f_15","unread-badge--context-icon-button":"_unread-badge--context-icon-button_1i73f_18"};exports.default=e;
 //# sourceMappingURL=UnreadBadge.module.scss.cjs.map

package/dist/components/unread-badge/UnreadBadge.module.scss.js

@@ -1,9 +1,9 @@
 import './UnreadBadge.css';const e = {
-  "unread-badge": "_unread-badge_1a64l_2",
-  "unread-badge--size-6": "_unread-badge--size-6_1a64l_7",
-  "unread-badge--size-8": "_unread-badge--size-8_1a64l_11",
-  "unread-badge--context-team-icon": "_unread-badge--context-team-icon_1a64l_15",
-  "unread-badge--context-icon-button": "_unread-badge--context-icon-button_1a64l_18"
+  "unread-badge": "_unread-badge_1i73f_2",
+  "unread-badge--size-6": "_unread-badge--size-6_1i73f_7",
+  "unread-badge--size-8": "_unread-badge--size-8_1i73f_11",
+  "unread-badge--context-team-icon": "_unread-badge--context-team-icon_1i73f_15",
+  "unread-badge--context-icon-button": "_unread-badge--context-icon-button_1i73f_18"
 };
 export {
   e as default

package/dist/components/user-avatar/UserAvatar.css

@@ -1 +1 @@
-._user-avatar_e79tw_2{position:relative;flex-shrink:0;border-radius:var(--radius-full);display:inline-block}._user-avatar__image_e79tw_8{display:block;width:100%;height:100%;object-fit:cover;vertical-align:middle;border-radius:var(--radius-full)}._user-avatar__fallback_e79tw_16{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--radius-full);color:#ffffffeb;font-family:Metropolis,var(--font-family-body),sans-serif;font-weight:var(--font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}._user-avatar__fallback--red_e79tw_29{background-color:var(--color-red-500)}._user-avatar__fallback--purple_e79tw_32{background-color:var(--color-purple-500)}._user-avatar__fallback--neutral_e79tw_35{background-color:var(--color-neutral-500)}._user-avatar__fallback--blue_e79tw_38{background-color:var(--color-blue-500)}._user-avatar__fallback--cyan_e79tw_41{background-color:var(--color-cyan-500)}._user-avatar__fallback--yellow_e79tw_44{background-color:var(--color-yellow-500)}._user-avatar__fallback--green_e79tw_47{background-color:var(--color-green-500)}._user-avatar__fallback--orange_e79tw_50{background-color:var(--color-orange-500)}._user-avatar__status_e79tw_53{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box}._user-avatar--size-12_e79tw_62{width:12px;height:12px}._user-avatar--size-12_e79tw_62 ._user-avatar__fallback_e79tw_16{font-size:5.604px}._user-avatar--size-12_e79tw_62 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-16_e79tw_73{width:16px;height:16px}._user-avatar--size-16_e79tw_73 ._user-avatar__fallback_e79tw_16{font-size:7.472px}._user-avatar--size-16_e79tw_73 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-20_e79tw_84{width:20px;height:20px}._user-avatar--size-20_e79tw_84 ._user-avatar__fallback_e79tw_16{font-size:9.34px}._user-avatar--size-20_e79tw_84 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-24_e79tw_95{width:24px;height:24px}._user-avatar--size-24_e79tw_95 ._user-avatar__fallback_e79tw_16{font-size:11.208px}._user-avatar--size-24_e79tw_95 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-28_e79tw_106{width:28px;height:28px}._user-avatar--size-28_e79tw_106 ._user-avatar__fallback_e79tw_16{font-size:13.076px}._user-avatar--size-28_e79tw_106 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-32_e79tw_117{width:32px;height:32px}._user-avatar--size-32_e79tw_117 ._user-avatar__fallback_e79tw_16{font-size:14.944px}._user-avatar--size-32_e79tw_117 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-40_e79tw_128{width:40px;height:40px}._user-avatar--size-40_e79tw_128 ._user-avatar__fallback_e79tw_16{font-size:18.68px}._user-avatar--size-40_e79tw_128 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-48_e79tw_139{width:48px;height:48px}._user-avatar--size-48_e79tw_139 ._user-avatar__fallback_e79tw_16{font-size:22.416px}._user-avatar--size-48_e79tw_139 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-56_e79tw_150{width:56px;height:56px}._user-avatar--size-56_e79tw_150 ._user-avatar__fallback_e79tw_16{font-size:26.152px}._user-avatar--size-56_e79tw_150 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-64_e79tw_161{width:64px;height:64px}._user-avatar--size-64_e79tw_161 ._user-avatar__fallback_e79tw_16{font-size:29.888px}._user-avatar--size-64_e79tw_161 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-72_e79tw_172{width:72px;height:72px}._user-avatar--size-72_e79tw_172 ._user-avatar__fallback_e79tw_16{font-size:33.624px}._user-avatar--size-72_e79tw_172 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-80_e79tw_183{width:80px;height:80px}._user-avatar--size-80_e79tw_183 ._user-avatar__fallback_e79tw_16{font-size:37.36px}._user-avatar--size-80_e79tw_183 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-96_e79tw_194{width:96px;height:96px}._user-avatar--size-96_e79tw_194 ._user-avatar__fallback_e79tw_16{font-size:44.832px}._user-avatar--size-96_e79tw_194 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-120_e79tw_205{width:120px;height:120px}._user-avatar--size-120_e79tw_205 ._user-avatar__fallback_e79tw_16{font-size:56.04px}._user-avatar--size-120_e79tw_205 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}
+._user-avatar_1csb5_2{position:relative;flex-shrink:0;border-radius:var(--radius-pill);display:inline-block}._user-avatar__image_1csb5_8{display:block;width:100%;height:100%;object-fit:cover;vertical-align:middle;border-radius:var(--radius-pill)}._user-avatar__fallback_1csb5_16{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--radius-pill);color:#ffffffeb;font-family:Metropolis,var(--font-family-body),sans-serif;font-weight:var(--font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}._user-avatar__fallback--red_1csb5_29{background-color:var(--color-red-500)}._user-avatar__fallback--purple_1csb5_32{background-color:var(--color-purple-500)}._user-avatar__fallback--neutral_1csb5_35{background-color:var(--color-neutral-500)}._user-avatar__fallback--blue_1csb5_38{background-color:var(--color-blue-500)}._user-avatar__fallback--cyan_1csb5_41{background-color:var(--color-cyan-500)}._user-avatar__fallback--yellow_1csb5_44{background-color:var(--color-yellow-500)}._user-avatar__fallback--green_1csb5_47{background-color:var(--color-green-500)}._user-avatar__fallback--orange_1csb5_50{background-color:var(--color-orange-500)}._user-avatar__status_1csb5_53{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box}._user-avatar--size-12_1csb5_62{width:12px;height:12px}._user-avatar--size-12_1csb5_62 ._user-avatar__fallback_1csb5_16{font-size:5.604px}._user-avatar--size-12_1csb5_62 ._user-avatar__status_1csb5_53{right:-1px;bottom:-1px}._user-avatar--size-16_1csb5_73{width:16px;height:16px}._user-avatar--size-16_1csb5_73 ._user-avatar__fallback_1csb5_16{font-size:7.472px}._user-avatar--size-16_1csb5_73 ._user-avatar__status_1csb5_53{right:-1px;bottom:-1px}._user-avatar--size-20_1csb5_84{width:20px;height:20px}._user-avatar--size-20_1csb5_84 ._user-avatar__fallback_1csb5_16{font-size:9.34px}._user-avatar--size-20_1csb5_84 ._user-avatar__status_1csb5_53{right:-1px;bottom:-1px}._user-avatar--size-24_1csb5_95{width:24px;height:24px}._user-avatar--size-24_1csb5_95 ._user-avatar__fallback_1csb5_16{font-size:11.208px}._user-avatar--size-24_1csb5_95 ._user-avatar__status_1csb5_53{right:-1px;bottom:-1px}._user-avatar--size-28_1csb5_106{width:28px;height:28px}._user-avatar--size-28_1csb5_106 ._user-avatar__fallback_1csb5_16{font-size:13.076px}._user-avatar--size-28_1csb5_106 ._user-avatar__status_1csb5_53{right:-1px;bottom:-1px}._user-avatar--size-32_1csb5_117{width:32px;height:32px}._user-avatar--size-32_1csb5_117 ._user-avatar__fallback_1csb5_16{font-size:14.944px}._user-avatar--size-32_1csb5_117 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-40_1csb5_128{width:40px;height:40px}._user-avatar--size-40_1csb5_128 ._user-avatar__fallback_1csb5_16{font-size:18.68px}._user-avatar--size-40_1csb5_128 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-48_1csb5_139{width:48px;height:48px}._user-avatar--size-48_1csb5_139 ._user-avatar__fallback_1csb5_16{font-size:22.416px}._user-avatar--size-48_1csb5_139 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-56_1csb5_150{width:56px;height:56px}._user-avatar--size-56_1csb5_150 ._user-avatar__fallback_1csb5_16{font-size:26.152px}._user-avatar--size-56_1csb5_150 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-64_1csb5_161{width:64px;height:64px}._user-avatar--size-64_1csb5_161 ._user-avatar__fallback_1csb5_16{font-size:29.888px}._user-avatar--size-64_1csb5_161 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-72_1csb5_172{width:72px;height:72px}._user-avatar--size-72_1csb5_172 ._user-avatar__fallback_1csb5_16{font-size:33.624px}._user-avatar--size-72_1csb5_172 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-80_1csb5_183{width:80px;height:80px}._user-avatar--size-80_1csb5_183 ._user-avatar__fallback_1csb5_16{font-size:37.36px}._user-avatar--size-80_1csb5_183 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-96_1csb5_194{width:96px;height:96px}._user-avatar--size-96_1csb5_194 ._user-avatar__fallback_1csb5_16{font-size:44.832px}._user-avatar--size-96_1csb5_194 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}._user-avatar--size-120_1csb5_205{width:120px;height:120px}._user-avatar--size-120_1csb5_205 ._user-avatar__fallback_1csb5_16{font-size:56.04px}._user-avatar--size-120_1csb5_205 ._user-avatar__status_1csb5_53{right:-2px;bottom:-2px}

package/dist/components/user-avatar/UserAvatar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-avatar_e79tw_2","user-avatar__image":"_user-avatar__image_e79tw_8","user-avatar__fallback":"_user-avatar__fallback_e79tw_16","user-avatar__fallback--red":"_user-avatar__fallback--red_e79tw_29","user-avatar__fallback--purple":"_user-avatar__fallback--purple_e79tw_32","user-avatar__fallback--neutral":"_user-avatar__fallback--neutral_e79tw_35","user-avatar__fallback--blue":"_user-avatar__fallback--blue_e79tw_38","user-avatar__fallback--cyan":"_user-avatar__fallback--cyan_e79tw_41","user-avatar__fallback--yellow":"_user-avatar__fallback--yellow_e79tw_44","user-avatar__fallback--green":"_user-avatar__fallback--green_e79tw_47","user-avatar__fallback--orange":"_user-avatar__fallback--orange_e79tw_50","user-avatar__status":"_user-avatar__status_e79tw_53","user-avatar--size-12":"_user-avatar--size-12_e79tw_62","user-avatar--size-16":"_user-avatar--size-16_e79tw_73","user-avatar--size-20":"_user-avatar--size-20_e79tw_84","user-avatar--size-24":"_user-avatar--size-24_e79tw_95","user-avatar--size-28":"_user-avatar--size-28_e79tw_106","user-avatar--size-32":"_user-avatar--size-32_e79tw_117","user-avatar--size-40":"_user-avatar--size-40_e79tw_128","user-avatar--size-48":"_user-avatar--size-48_e79tw_139","user-avatar--size-56":"_user-avatar--size-56_e79tw_150","user-avatar--size-64":"_user-avatar--size-64_e79tw_161","user-avatar--size-72":"_user-avatar--size-72_e79tw_172","user-avatar--size-80":"_user-avatar--size-80_e79tw_183","user-avatar--size-96":"_user-avatar--size-96_e79tw_194","user-avatar--size-120":"_user-avatar--size-120_e79tw_205"};exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-avatar_1csb5_2","user-avatar__image":"_user-avatar__image_1csb5_8","user-avatar__fallback":"_user-avatar__fallback_1csb5_16","user-avatar__fallback--red":"_user-avatar__fallback--red_1csb5_29","user-avatar__fallback--purple":"_user-avatar__fallback--purple_1csb5_32","user-avatar__fallback--neutral":"_user-avatar__fallback--neutral_1csb5_35","user-avatar__fallback--blue":"_user-avatar__fallback--blue_1csb5_38","user-avatar__fallback--cyan":"_user-avatar__fallback--cyan_1csb5_41","user-avatar__fallback--yellow":"_user-avatar__fallback--yellow_1csb5_44","user-avatar__fallback--green":"_user-avatar__fallback--green_1csb5_47","user-avatar__fallback--orange":"_user-avatar__fallback--orange_1csb5_50","user-avatar__status":"_user-avatar__status_1csb5_53","user-avatar--size-12":"_user-avatar--size-12_1csb5_62","user-avatar--size-16":"_user-avatar--size-16_1csb5_73","user-avatar--size-20":"_user-avatar--size-20_1csb5_84","user-avatar--size-24":"_user-avatar--size-24_1csb5_95","user-avatar--size-28":"_user-avatar--size-28_1csb5_106","user-avatar--size-32":"_user-avatar--size-32_1csb5_117","user-avatar--size-40":"_user-avatar--size-40_1csb5_128","user-avatar--size-48":"_user-avatar--size-48_1csb5_139","user-avatar--size-56":"_user-avatar--size-56_1csb5_150","user-avatar--size-64":"_user-avatar--size-64_1csb5_161","user-avatar--size-72":"_user-avatar--size-72_1csb5_172","user-avatar--size-80":"_user-avatar--size-80_1csb5_183","user-avatar--size-96":"_user-avatar--size-96_1csb5_194","user-avatar--size-120":"_user-avatar--size-120_1csb5_205"};exports.default=a;
 //# sourceMappingURL=UserAvatar.module.scss.cjs.map

package/dist/components/user-avatar/UserAvatar.module.scss.js

@@ -1,30 +1,30 @@
 import './UserAvatar.css';const a = {
-  "user-avatar": "_user-avatar_e79tw_2",
-  "user-avatar__image": "_user-avatar__image_e79tw_8",
-  "user-avatar__fallback": "_user-avatar__fallback_e79tw_16",
-  "user-avatar__fallback--red": "_user-avatar__fallback--red_e79tw_29",
-  "user-avatar__fallback--purple": "_user-avatar__fallback--purple_e79tw_32",
-  "user-avatar__fallback--neutral": "_user-avatar__fallback--neutral_e79tw_35",
-  "user-avatar__fallback--blue": "_user-avatar__fallback--blue_e79tw_38",
-  "user-avatar__fallback--cyan": "_user-avatar__fallback--cyan_e79tw_41",
-  "user-avatar__fallback--yellow": "_user-avatar__fallback--yellow_e79tw_44",
-  "user-avatar__fallback--green": "_user-avatar__fallback--green_e79tw_47",
-  "user-avatar__fallback--orange": "_user-avatar__fallback--orange_e79tw_50",
-  "user-avatar__status": "_user-avatar__status_e79tw_53",
-  "user-avatar--size-12": "_user-avatar--size-12_e79tw_62",
-  "user-avatar--size-16": "_user-avatar--size-16_e79tw_73",
-  "user-avatar--size-20": "_user-avatar--size-20_e79tw_84",
-  "user-avatar--size-24": "_user-avatar--size-24_e79tw_95",
-  "user-avatar--size-28": "_user-avatar--size-28_e79tw_106",
-  "user-avatar--size-32": "_user-avatar--size-32_e79tw_117",
-  "user-avatar--size-40": "_user-avatar--size-40_e79tw_128",
-  "user-avatar--size-48": "_user-avatar--size-48_e79tw_139",
-  "user-avatar--size-56": "_user-avatar--size-56_e79tw_150",
-  "user-avatar--size-64": "_user-avatar--size-64_e79tw_161",
-  "user-avatar--size-72": "_user-avatar--size-72_e79tw_172",
-  "user-avatar--size-80": "_user-avatar--size-80_e79tw_183",
-  "user-avatar--size-96": "_user-avatar--size-96_e79tw_194",
-  "user-avatar--size-120": "_user-avatar--size-120_e79tw_205"
+  "user-avatar": "_user-avatar_1csb5_2",
+  "user-avatar__image": "_user-avatar__image_1csb5_8",
+  "user-avatar__fallback": "_user-avatar__fallback_1csb5_16",
+  "user-avatar__fallback--red": "_user-avatar__fallback--red_1csb5_29",
+  "user-avatar__fallback--purple": "_user-avatar__fallback--purple_1csb5_32",
+  "user-avatar__fallback--neutral": "_user-avatar__fallback--neutral_1csb5_35",
+  "user-avatar__fallback--blue": "_user-avatar__fallback--blue_1csb5_38",
+  "user-avatar__fallback--cyan": "_user-avatar__fallback--cyan_1csb5_41",
+  "user-avatar__fallback--yellow": "_user-avatar__fallback--yellow_1csb5_44",
+  "user-avatar__fallback--green": "_user-avatar__fallback--green_1csb5_47",
+  "user-avatar__fallback--orange": "_user-avatar__fallback--orange_1csb5_50",
+  "user-avatar__status": "_user-avatar__status_1csb5_53",
+  "user-avatar--size-12": "_user-avatar--size-12_1csb5_62",
+  "user-avatar--size-16": "_user-avatar--size-16_1csb5_73",
+  "user-avatar--size-20": "_user-avatar--size-20_1csb5_84",
+  "user-avatar--size-24": "_user-avatar--size-24_1csb5_95",
+  "user-avatar--size-28": "_user-avatar--size-28_1csb5_106",
+  "user-avatar--size-32": "_user-avatar--size-32_1csb5_117",
+  "user-avatar--size-40": "_user-avatar--size-40_1csb5_128",
+  "user-avatar--size-48": "_user-avatar--size-48_1csb5_139",
+  "user-avatar--size-56": "_user-avatar--size-56_1csb5_150",
+  "user-avatar--size-64": "_user-avatar--size-64_1csb5_161",
+  "user-avatar--size-72": "_user-avatar--size-72_1csb5_172",
+  "user-avatar--size-80": "_user-avatar--size-80_1csb5_183",
+  "user-avatar--size-96": "_user-avatar--size-96_1csb5_194",
+  "user-avatar--size-120": "_user-avatar--size-120_1csb5_205"
 };
 export {
   a as default

package/dist/components/user-avatar-group/UserAvatarGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),i=require("../tooltip/Tooltip.cjs"),m=require("../user-avatar/UserAvatar.cjs"),r=require("./UserAvatarGroup.module.scss.cjs");function f(e){return e.length===0?"":e.length===1?e[0].name:e.length<=3?e.map(t=>t.name).join(", "):`${e.slice(0,2).map(t=>t.name).join(", ")}, +${e.length-2} more`}function g({avatars:e,className:t="",max:u=3,size:s="20"}){const c=e.slice(0,u),n=e.slice(u),o=n.length,p=[r.default["user-avatar-group"],s!=="20"?r.default[`user-avatar-group--size-${s}`]:"",t].filter(Boolean).join(" ");return a.jsxs("div",{className:p,role:"group","aria-label":`${e.length} participants`,children:[c.map(l=>a.jsxs("span",{className:r.default["user-avatar-group__item"],children:[a.jsx("span",{className:r.default["user-avatar-group__trigger"],children:a.jsx(m.default,{src:l.src,alt:l.name,name:l.name,size:s})}),a.jsx("div",{className:r.default["user-avatar-group__tooltip-layer"],role:"presentation",children:a.jsx(i.default,{arrow:"bottom",className:r.default["user-avatar-group__tooltip"],label:l.name})})]},l.key)),o>0&&a.jsxs("span",{className:[r.default["user-avatar-group__item"],r.default["user-avatar-group__overflow"]].join(" "),"aria-label":`${o} more participants`,children:[a.jsxs("span",{className:r.default["user-avatar-group__trigger"],children:["+",o]}),a.jsx("div",{className:r.default["user-avatar-group__tooltip-layer"],role:"presentation",children:a.jsx(i.default,{arrow:"bottom",className:r.default["user-avatar-group__tooltip"],label:f(n)})})]})]})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),i=require("../tooltip/Tooltip.cjs"),d=require("../user-avatar/UserAvatar.cjs"),a=require("./UserAvatarGroup.module.scss.cjs"),_=e=>`${e} participants`,v=e=>`${e} more participants`;function j(e){return e.length===0?"":e.length===1?e[0].name:e.length<=3?e.map(t=>t.name).join(", "):`${e.slice(0,2).map(t=>t.name).join(", ")}, +${e.length-2} more`}function b({avatars:e,className:t="",max:u=3,size:s="20",formatGroupLabel:c=_,formatOverflowLabel:p=v,formatOverflowNames:m=j}){const f=e.slice(0,u),n=e.slice(u),o=n.length,g=[a.default["user-avatar-group"],s!=="20"?a.default[`user-avatar-group--size-${s}`]:"",t].filter(Boolean).join(" ");return r.jsxs("div",{className:g,role:"group","aria-label":c(e.length),children:[f.map(l=>r.jsxs("span",{className:a.default["user-avatar-group__item"],children:[r.jsx("span",{className:a.default["user-avatar-group__trigger"],children:r.jsx(d.default,{src:l.src,alt:l.name,name:l.name,size:s})}),r.jsx("div",{className:a.default["user-avatar-group__tooltip-layer"],role:"presentation",children:r.jsx(i.default,{arrow:"bottom",className:a.default["user-avatar-group__tooltip"],label:l.name})})]},l.key)),o>0&&r.jsxs("span",{className:[a.default["user-avatar-group__item"],a.default["user-avatar-group__overflow"]].join(" "),"aria-label":p(o),children:[r.jsxs("span",{className:a.default["user-avatar-group__trigger"],children:["+",o]}),r.jsx("div",{className:a.default["user-avatar-group__tooltip-layer"],role:"presentation",children:r.jsx(i.default,{arrow:"bottom",className:a.default["user-avatar-group__tooltip"],label:m(n)})})]})]})}exports.default=b;
 //# sourceMappingURL=UserAvatarGroup.cjs.map

package/dist/components/user-avatar-group/UserAvatarGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatarGroup.cjs","sources":["../../../src/components/user-avatar-group/UserAvatarGroup.tsx"],"sourcesContent":["import Tooltip from '@/components/tooltip/Tooltip';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport styles from './UserAvatarGroup.module.scss';\n\nexport type UserAvatarGroupSize =\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72';\n\nexport interface UserAvatarGroupItem {\n  /** Unique key for the list item. */\n  key: string;\n  /** Image URL for the avatar. Omit to render the Fallback (initials) variant. */\n  src?: string;\n  /** Alt text / display name for the avatar. Drives initials and fallback colour. */\n  name: string;\n}\n\nexport interface UserAvatarGroupProps {\n  /** Array of avatar items to display. */\n  avatars: UserAvatarGroupItem[];\n  /** Maximum number of avatars to show before showing the overflow count. Default: 3. */\n  max?: number;\n  /** Avatar size in px. Matches Figma Avatar Group size options. Default: '20'. */\n  size?: UserAvatarGroupSize;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction overflowNamesLabel(hidden: UserAvatarGroupItem[]): string {\n  if (hidden.length === 0) return '';\n  if (hidden.length === 1) return hidden[0].name;\n  if (hidden.length <= 3) return hidden.map((a) => a.name).join(', ');\n  return `${hidden\n    .slice(0, 2)\n    .map((a) => a.name)\n    .join(', ')}, +${hidden.length - 2} more`;\n}\n\n/**\n * A User Avatar Group displays multiple participants as a stack of overlapping avatars. It's\n * a compact way to show \"who's involved\" — thread participants, channel members, call\n * attendees — without a list.\n */\nexport default function UserAvatarGroup({\n  avatars,\n  className = '',\n  max = 3,\n  size = '20',\n}: UserAvatarGroupProps) {\n  const visible = avatars.slice(0, max);\n  const hidden = avatars.slice(max);\n  const overflow = hidden.length;\n\n  const rootClass = [\n    styles['user-avatar-group'],\n    size !== '20' ? styles[`user-avatar-group--size-${size}`] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"group\"\n      aria-label={`${avatars.length} participants`}\n    >\n      {visible.map((avatar) => (\n        <span key={avatar.key} className={styles['user-avatar-group__item']}>\n          <span className={styles['user-avatar-group__trigger']}>\n            <UserAvatar\n              src={avatar.src}\n              alt={avatar.name}\n              name={avatar.name}\n              size={size}\n            />\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={avatar.name}\n            />\n          </div>\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className={[\n            styles['user-avatar-group__item'],\n            styles['user-avatar-group__overflow'],\n          ].join(' ')}\n          aria-label={`${overflow} more participants`}\n        >\n          <span className={styles['user-avatar-group__trigger']}>\n            +{overflow}\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={overflowNamesLabel(hidden)}\n            />\n          </div>\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["overflowNamesLabel","hidden","a","UserAvatarGroup","avatars","className","max","size","visible","overflow","rootClass","styles","jsxs","avatar","jsx","UserAvatar","Tooltip"],"mappings":"8QAmCA,SAASA,EAAmBC,EAAuC,CACjE,OAAIA,EAAO,SAAW,EAAU,GAC5BA,EAAO,SAAW,EAAUA,EAAO,CAAC,EAAE,KACtCA,EAAO,QAAU,EAAUA,EAAO,IAAKC,GAAMA,EAAE,IAAI,EAAE,KAAK,IAAI,EAC3D,GAAGD,EACP,MAAM,EAAG,CAAC,EACV,IAAKC,GAAMA,EAAE,IAAI,EACjB,KAAK,IAAI,CAAC,MAAMD,EAAO,OAAS,CAAC,OACtC,CAOA,SAAwBE,EAAgB,CACtC,QAAAC,EACA,UAAAC,EAAY,GACZ,IAAAC,EAAM,EACN,KAAAC,EAAO,IACT,EAAyB,CACvB,MAAMC,EAAUJ,EAAQ,MAAM,EAAGE,CAAG,EAC9BL,EAASG,EAAQ,MAAME,CAAG,EAC1BG,EAAWR,EAAO,OAElBS,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BJ,IAAS,KAAOI,UAAO,2BAA2BJ,CAAI,EAAE,EAAI,GAC5DF,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,KAAC,MAAA,CACC,UAAWF,EACX,KAAK,QACL,aAAY,GAAGN,EAAQ,MAAM,gBAE5B,SAAA,CAAAI,EAAQ,IAAKK,GACZD,OAAC,QAAsB,UAAWD,EAAAA,QAAO,yBAAyB,EAChE,SAAA,CAAAG,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,4BAA4B,EAClD,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAKF,EAAO,IACZ,IAAKA,EAAO,KACZ,KAAMA,EAAO,KACb,KAAAN,CAAA,CAAA,EAEJ,EACAO,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,kCAAkC,EACpD,KAAK,eAEL,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,SACN,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,MAAOE,EAAO,IAAA,CAAA,CAChB,CAAA,CACF,GAlBSA,EAAO,GAmBlB,CACD,EACAJ,EAAW,GACVG,EAAAA,KAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,yBAAyB,EAChCA,EAAAA,QAAO,6BAA6B,CAAA,EACpC,KAAK,GAAG,EACV,aAAY,GAAGF,CAAQ,qBAEvB,SAAA,CAAAG,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EAAG,SAAA,CAAA,IACnDF,CAAA,EACJ,EACAK,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,kCAAkC,EACpD,KAAK,eAEL,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,SACN,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,MAAOX,EAAmBC,CAAM,CAAA,CAAA,CAClC,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAIR"}
+{"version":3,"file":"UserAvatarGroup.cjs","sources":["../../../src/components/user-avatar-group/UserAvatarGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Tooltip from '@/components/tooltip/Tooltip';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport styles from './UserAvatarGroup.module.scss';\n\nexport type UserAvatarGroupSize =\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72';\n\nexport interface UserAvatarGroupItem {\n  /** Unique key for the list item. */\n  key: string;\n  /** Image URL for the avatar. Omit to render the Fallback (initials) variant. */\n  src?: string;\n  /** Alt text / display name for the avatar. Drives initials and fallback colour. */\n  name: string;\n}\n\nexport interface UserAvatarGroupProps {\n  /** Array of avatar items to display. */\n  avatars: UserAvatarGroupItem[];\n  /** Maximum number of avatars to show before showing the overflow count. Default: 3. */\n  max?: number;\n  /** Avatar size in px. Matches Figma Avatar Group size options. Default: '20'. */\n  size?: UserAvatarGroupSize;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Accessible name for the group. Default: `{count} participants`. */\n  formatGroupLabel?: (count: number) => string;\n  /** Accessible name for the +N overflow. Default: `{count} more participants`. */\n  formatOverflowLabel?: (count: number) => string;\n  /** Overflow tooltip text. Default: up to three names, then `A, B, +N more`. */\n  formatOverflowNames?: (hidden: UserAvatarGroupItem[]) => ReactNode;\n}\n\nconst defaultFormatGroupLabel = (count: number) => `${count} participants`;\nconst defaultFormatOverflowLabel = (count: number) =>\n  `${count} more participants`;\n\nfunction overflowNamesLabel(hidden: UserAvatarGroupItem[]): string {\n  if (hidden.length === 0) return '';\n  if (hidden.length === 1) return hidden[0].name;\n  if (hidden.length <= 3) return hidden.map((a) => a.name).join(', ');\n  return `${hidden\n    .slice(0, 2)\n    .map((a) => a.name)\n    .join(', ')}, +${hidden.length - 2} more`;\n}\n\n/**\n * A User Avatar Group displays multiple participants as a stack of overlapping avatars. It's\n * a compact way to show \"who's involved\" — thread participants, channel members, call\n * attendees — without a list.\n */\nexport default function UserAvatarGroup({\n  avatars,\n  className = '',\n  max = 3,\n  size = '20',\n  formatGroupLabel = defaultFormatGroupLabel,\n  formatOverflowLabel = defaultFormatOverflowLabel,\n  formatOverflowNames = overflowNamesLabel,\n}: UserAvatarGroupProps) {\n  const visible = avatars.slice(0, max);\n  const hidden = avatars.slice(max);\n  const overflow = hidden.length;\n\n  const rootClass = [\n    styles['user-avatar-group'],\n    size !== '20' ? styles[`user-avatar-group--size-${size}`] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"group\"\n      aria-label={formatGroupLabel(avatars.length)}\n    >\n      {visible.map((avatar) => (\n        <span key={avatar.key} className={styles['user-avatar-group__item']}>\n          <span className={styles['user-avatar-group__trigger']}>\n            <UserAvatar\n              src={avatar.src}\n              alt={avatar.name}\n              name={avatar.name}\n              size={size}\n            />\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={avatar.name}\n            />\n          </div>\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className={[\n            styles['user-avatar-group__item'],\n            styles['user-avatar-group__overflow'],\n          ].join(' ')}\n          aria-label={formatOverflowLabel(overflow)}\n        >\n          <span className={styles['user-avatar-group__trigger']}>\n            +{overflow}\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={formatOverflowNames(hidden)}\n            />\n          </div>\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["defaultFormatGroupLabel","count","defaultFormatOverflowLabel","overflowNamesLabel","hidden","a","UserAvatarGroup","avatars","className","max","size","formatGroupLabel","formatOverflowLabel","formatOverflowNames","visible","overflow","rootClass","styles","jsxs","avatar","jsx","UserAvatar","Tooltip"],"mappings":"8QA0CMA,EAA2BC,GAAkB,GAAGA,CAAK,gBACrDC,EAA8BD,GAClC,GAAGA,CAAK,qBAEV,SAASE,EAAmBC,EAAuC,CACjE,OAAIA,EAAO,SAAW,EAAU,GAC5BA,EAAO,SAAW,EAAUA,EAAO,CAAC,EAAE,KACtCA,EAAO,QAAU,EAAUA,EAAO,IAAKC,GAAMA,EAAE,IAAI,EAAE,KAAK,IAAI,EAC3D,GAAGD,EACP,MAAM,EAAG,CAAC,EACV,IAAKC,GAAMA,EAAE,IAAI,EACjB,KAAK,IAAI,CAAC,MAAMD,EAAO,OAAS,CAAC,OACtC,CAOA,SAAwBE,EAAgB,CACtC,QAAAC,EACA,UAAAC,EAAY,GACZ,IAAAC,EAAM,EACN,KAAAC,EAAO,KACP,iBAAAC,EAAmBX,EACnB,oBAAAY,EAAsBV,EACtB,oBAAAW,EAAsBV,CACxB,EAAyB,CACvB,MAAMW,EAAUP,EAAQ,MAAM,EAAGE,CAAG,EAC9BL,EAASG,EAAQ,MAAME,CAAG,EAC1BM,EAAWX,EAAO,OAElBY,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BP,IAAS,KAAOO,UAAO,2BAA2BP,CAAI,EAAE,EAAI,GAC5DF,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEU,EAAAA,KAAC,MAAA,CACC,UAAWF,EACX,KAAK,QACL,aAAYL,EAAiBJ,EAAQ,MAAM,EAE1C,SAAA,CAAAO,EAAQ,IAAKK,GACZD,OAAC,QAAsB,UAAWD,EAAAA,QAAO,yBAAyB,EAChE,SAAA,CAAAG,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,4BAA4B,EAClD,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAKF,EAAO,IACZ,IAAKA,EAAO,KACZ,KAAMA,EAAO,KACb,KAAAT,CAAA,CAAA,EAEJ,EACAU,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,kCAAkC,EACpD,KAAK,eAEL,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,SACN,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,MAAOE,EAAO,IAAA,CAAA,CAChB,CAAA,CACF,GAlBSA,EAAO,GAmBlB,CACD,EACAJ,EAAW,GACVG,EAAAA,KAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,yBAAyB,EAChCA,EAAAA,QAAO,6BAA6B,CAAA,EACpC,KAAK,GAAG,EACV,aAAYL,EAAoBG,CAAQ,EAExC,SAAA,CAAAG,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EAAG,SAAA,CAAA,IACnDF,CAAA,EACJ,EACAK,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,kCAAkC,EACpD,KAAK,eAEL,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,SACN,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,MAAOJ,EAAoBT,CAAM,CAAA,CAAA,CACnC,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAIR"}