npm - @stackone/malachite - Versions diffs - 2.31.1 → 2.33.0 - Mend

@stackone/malachite 2.31.1 → 2.33.0

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

Files changed (21) hide show

package/COMPONENTS.md +1 -1
package/dist/components/FieldMessage.js.map +1 -1
package/dist/components/Input/Input.js +65 -58
package/dist/components/Input/Input.js.map +1 -1
package/dist/components/SelectableCard.js +217 -194
package/dist/components/SelectableCard.js.map +1 -1
package/dist/components/SelectionBar.js +1 -1
package/dist/components/SelectionBar.js.map +1 -1
package/dist/components/SidePanel.js +60 -36
package/dist/components/SidePanel.js.map +1 -1
package/dist/components/TextArea/TextArea.js +1 -1
package/dist/components/TextArea/TextArea.js.map +1 -1
package/dist/components/Tooltip.js +57 -56
package/dist/components/Tooltip.js.map +1 -1
package/dist/components/Typography/CodeText.js +45 -22
package/dist/components/Typography/CodeText.js.map +1 -1
package/dist/components/Typography/EllipsisText.js +14 -12
package/dist/components/Typography/EllipsisText.js.map +1 -1
package/dist/index.d.ts +11 -2
package/dist/tailwind.css.js +1 -1
package/package.json +1 -1

package/dist/components/SelectableCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useId, useRef } from 'react';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING_WITHIN } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n label: string;\n /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". /\n type?: TagType;\n}\n\n/* The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n * profile with unsaved changes. /\nexport type SelectableCardVariant = 'profile' \| 'library' \| 'editing';\n\nexport interface SelectableCardProps {\n /* Identifies the card inside its group; handed back to `onSelect`. /\n value: string;\n title: string;\n /* Leading glyph on the title line, e.g. a library/book icon. /\n titleIcon?: React.ReactNode;\n /* Pins the card as the account default, marked beside the title. /\n isDefault?: boolean;\n /* Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. /\n variant?: SelectableCardVariant;\n /* Small label above the title (\"Profile\", \"Explore\"). /\n eyebrow?: string;\n /* Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. /\n status?: SelectableCardStatus;\n /* Supporting copy under the title, clamped to two lines. /\n description?: string;\n /* Bottom-left summary (\"16 Actions\", \"10 Selected\"). /\n countLabel?: string;\n /* Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n * xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. /\n actions?: React.ReactNode;\n selected?: boolean;\n /* Replaces the card's content with a centred in-progress message. /\n loading?: boolean;\n loadingLabel?: string;\n loadingHint?: string;\n /* Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. /\n disabled?: boolean;\n /* Mutes the title without blocking selection. /\n dimmed?: boolean;\n onSelect?: (value: string) => void;\n /* Tab stop for the card. /\n tabIndex?: number;\n /* Replaces the generated accessible name (eyebrow + title + status). /\n 'aria-label'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/* How far a selected card's outline sweeps past its own edge. The strip keeps this much\n * clear of its scroller's clip. /\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/* Weight of the strip's bottom rule, which a selected card's flare reaches down through. /\nexport const STRIP_RULE_PX = 2;\n\n/* Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n * stops half a stroke inside the flare box. /\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. /\nconst pathTo = (base: number): string => {\n const inset = STROKE_PX / 2;\n const left = FLARE_PX + inset;\n const right = FLARE_PX + CARD_WIDTH_PX - inset;\n const top = inset;\n const r = CORNER_PX - inset;\n return [\n `M${left - FLARE_PX} ${base}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n `L${left} ${top + r}`,\n `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n `L${right - r} ${top}`,\n `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n `L${right} ${base - FLARE_PX}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' \| 'hover' \| 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n 'background-color': HOVER_SURFACE_FILL,\n 'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n 'background-color': RESTING_SURFACE,\n};\n\n/* Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. /\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n profile: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n [TINT_PROPERTY]: PROFILE_TINT,\n },\n },\n library: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n [TINT_PROPERTY]: LIBRARY_TINT,\n },\n },\n editing: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: EDITING_ACCENT,\n [TINT_PROPERTY]: EDITING_TINT,\n },\n },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n profile: {\n resting: RESTING_EYEBROW,\n selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n editing: {\n resting: RESTING_EYEBROW,\n selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n position: absolute;\n left: -${FLARE_PX}px;\n top: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n.${ROOT_CLASS} > :not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n position: relative;\n z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n Object.entries(declarations)\n .map(([property, value]) => ` ${property}: ${value};`)\n .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n state === 'hover'\n ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n variant: SelectableCardVariant,\n state: CardState,\n declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n .flatMap((variant) =>\n (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n ruleFor(variant, state, SURFACES[variant][state]),\n ),\n )\n .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n color: MUTED,\n lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n color: 'var(--malachite-text-primary)',\n};\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n color: PROFILE_ACCENT,\n display: 'inline-flex',\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n * travels by `aria-describedby`, which describes rather than names. /\nconst DefaultMarker: React.FC = () => (\n <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n <span role=\"img\" aria-label={DEFAULT_MARKER_LABEL} style={DEFAULT_MARKER_STYLE}>\n <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n </span>\n </Tooltip>\n);\n\nconst joinIds = (ids: Array<string \| undefined>): string \| undefined => {\n const present = ids.filter((id): id is string => id !== undefined);\n return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/* A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. /\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n value,\n title,\n titleIcon,\n isDefault = false,\n variant = 'profile',\n eyebrow,\n status,\n description,\n countLabel,\n actions,\n selected = false,\n loading = false,\n loadingLabel = 'Loading…',\n loadingHint,\n disabled = false,\n dimmed = false,\n onSelect,\n tabIndex,\n 'aria-label': ariaLabel,\n className = '',\n style,\n}) => {\n const { pinned } = useCardStripSlot();\n const hoverable = !selected && !disabled;\n\n const rootRef = useRef<HTMLDivElement>(null);\n useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n const outlineGradientId = `${instanceId}-outline`;\n const eyebrowId = `${instanceId}-eyebrow`;\n const statusId = `${instanceId}-status`;\n const titleId = `${instanceId}-title`;\n const descriptionId = `${instanceId}-description`;\n const countId = `${instanceId}-count`;\n\n const labelledBy = ariaLabel\n ? undefined\n : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n const describedBy = joinIds([\n description ? descriptionId : undefined,\n countLabel ? countId : undefined,\n ]);\n\n if (loading) {\n return (\n <div\n ref={rootRef}\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n data-variant=\"editing\"\n data-state=\"selected\"\n className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n style={\n {\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n paddingTop: `${PENDING_BODY_TOP_PX}px`,\n paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n justifyContent: 'center',\n [OUTLINE_PROPERTY]: PENDING,\n [TINT_PROPERTY]: EDITING_TINT,\n ...style,\n } as React.CSSProperties\n }\n >\n {/ The same outline a selected card wears: this IS the selection while a profile\n is being built, so it has to break the strip's rule rather than sit on it. /}\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n {loadingLabel}\n </Text>\n {loadingHint ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n {loadingHint}\n </Text>\n ) : null}\n </div>\n );\n }\n\n const titleInTopRow = variant === 'library';\n\n const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n\n return (\n <div\n ref={rootRef}\n data-variant={variant}\n data-pinned={pinned ? 'true' : 'false'}\n data-state={selected ? 'selected' : 'resting'}\n data-hoverable={hoverable ? '' : undefined}\n className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN} ${className}`.trim()}\n style={{\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n ...style,\n }}\n >\n {selected ? (\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n ) : null}\n <button\n type=\"button\"\n role=\"radio\"\n data-value={value}\n aria-checked={selected}\n aria-label={ariaLabel}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n aria-disabled={disabled \|\| undefined}\n tabIndex={tabIndex ?? (selected ? 0 : -1)}\n onClick={() => {\n if (disabled \|\| selected) {\n return;\n }\n onSelect?.(value);\n }}\n className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n style={{ borderRadius: CARD_RADIUS }}\n >\n {/ 26px is the xsmall icon button the cluster usually holds, plus a gap: the\n cluster stands over the end of this row, so the eyebrow stops short of it. /}\n <div\n className={`flex h-[13px] shrink-0 items-center gap-2 ${\n actions ? 'pr-[26px]' : 'pr-1'\n }`}\n >\n <div className=\"flex min-w-0 items-center gap-1.5\">\n {titleInTopRow ? (\n <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </span>\n ) : null}\n {eyebrow ? (\n <span id={eyebrowId} className=\"flex min-w-0\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n {eyebrow}\n </Text>\n </span>\n ) : null}\n {status ? (\n <span id={statusId} className=\"flex min-w-0\">\n <Tag\n value={status.label}\n type={status.type ?? 'default'}\n textTransform=\"none\"\n paddingSize=\"compact\"\n />\n </span>\n ) : null}\n </div>\n </div>\n\n <div\n className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n titleInTopRow ? 'justify-end' : 'justify-between'\n }`}\n >\n {titleInTopRow ? null : (\n <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </div>\n )}\n {description ? (\n <span id={descriptionId} className=\"block min-w-0\">\n <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n {description}\n </Text>\n </span>\n ) : null}\n </div>\n </button>\n\n <span id={countId} className=\"min-w-0 self-end truncate pr-4 pb-3 pl-4\">\n {countLabel ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n {countLabel}\n </Text>\n ) : null}\n </span>\n\n {/ Lifted out of the flow rather than given a grid cell, so it can sit on the\n eyebrow row — which belongs to the control and cannot hold a second one. */}\n {actions ? (\n <div\n data-selectable-card-actions=\"\"\n className=\"absolute top-3 right-4 flex h-[13px] shrink-0 items-center gap-2.5\"\n >\n {actions}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","DefaultMarker","jsx","Tooltip","PinIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","actions","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","countId","labelledBy","describedBy","jsxs","Text","titleInTopRow","eyebrowStyle","FOCUS_RING_WITHIN","TruncatedTooltip","Tag"],"mappings":";;;;;;;;;;AA2DO,MAAMA,IAAgB,KACvBC,IAAa,GAAGD,CAAa,MAC7BE,IAAc,SACdC,IAAc,qCACdC,IAAc,GAAGD,CAAW,IAAIA,CAAW,QAE3CE,IAAQ,8DACRC,KAAU,4CAEVC,KAAiB,oDACjBC,KAAe,2DACfC,KAA0B,6DAC1BC,IAA0B,KAE1BC,KAAe,mEACfC,KAA0B,qEAE1BC,KAAiB,gEACjBC,KAAe,0DAEfC,IAAuB,kEAEvBC,KAAkB,wDAClBC,KAAiB,8DAEjBC,KAAqB,8DAIdC,KAAgB,IACvBC,IAAWD,IACXE,IAAY,GACZC,KAAiB,KACjBC,KAAY,IAGLC,KAAgB,GAIhBC,KAAoBL,IAAWC,IAAY,GAElDK,IAAkB1B,IAAgBoB,IAAW,GAC7CO,IAAmBL,KAAiBE,KAAgBH,GAGpDO,KAAS,CAACC,MAAyB;AACrC,QAAMC,IAAQT,IAAY,GACpBU,IAAOX,IAAWU,GAClBE,IAAQZ,IAAWpB,IAAgB8B,GACnCG,IAAMH,GACN,IAAIP,KAAYO;AACtB,SAAO;AAAA,IACH,IAAIC,IAAOX,CAAQ,IAAIS,CAAI;AAAA,IAC3B,IAAIT,CAAQ,IAAIA,CAAQ,UAAUW,CAAI,IAAIF,IAAOT,CAAQ;AAAA,IACzD,IAAIW,CAAI,IAAIE,IAAM,CAAC;AAAA,IACnB,IAAI,CAAC,IAAI,CAAC,UAAUF,IAAO,CAAC,IAAIE,CAAG;AAAA,IACnC,IAAID,IAAQ,CAAC,IAAIC,CAAG;AAAA,IACpB,IAAI,CAAC,IAAI,CAAC,UAAUD,CAAK,IAAIC,IAAM,CAAC;AAAA,IACpC,IAAID,CAAK,IAAIH,IAAOT,CAAQ;AAAA,IAC5B,IAAIA,CAAQ,IAAIA,CAAQ,UAAUY,IAAQZ,CAAQ,IAAIS,CAAI;AAAA,EAAA,EAC5D,KAAK,GAAG;AACd,GAEMK,IAAeN,GAAON,KAAiBE,KAAgB,CAAC,GAExDW,IAAY,GAAGD,CAAY,MAEpBE,IAAc,qCAErBC,IAAa,6BACbC,KAAW,mCAEXC,IAAmB,6CACnBC,IAAgB,0CAOhBC,IAA8B;AAAA,EAChC,oBAAoBvB;AAAA,EACpB,qBAAqB;AACzB,GAEMwB,IAA6C;AAAA,EAC/C,oBAAoB1B;AACxB,GAGM2B,IAA2E;AAAA,EAC7E,SAAS;AAAA,IACL,SAASD;AAAA,IACT,OAAOD;AAAA,IACP,UAAU;AAAA,MACN,CAACF,CAAgB,GAAG9B;AAAA,MACpB,CAAC+B,CAAa,GAAGhC;AAAA,IAAA;AAAA,EACrB;AAAA,EAEJ,SAAS;AAAA,IACL,SAASkC;AAAA,IACT,OAAOD;AAAA,IACP,UAAU;AAAA,MACN,CAACF,CAAgB,GAAG3B;AAAA,MACpB,CAAC4B,CAAa,GAAG7B;AAAA,IAAA;AAAA,EACrB;AAAA,EAEJ,SAAS;AAAA,IACL,SAAS+B;AAAA,IACT,OAAOD;AAAA,IACP,UAAU;AAAA,MACN,CAACF,CAAgB,GAAG1B;AAAA,MACpB,CAAC2B,CAAa,GAAG1B;AAAA,IAAA;AAAA,EACrB;AAER,GAEM8B,IAAuC,EAAE,OAAOtC,GAAA,GAEhDuC,KAAqF;AAAA,EACvF,SAAS;AAAA,IACL,SAASD;AAAA,IACT,UAAU,EAAE,OAAOrC,IAAgB,SAASG,EAAA;AAAA,EAAwB;AAAA,EAExE,SAAS,EAAE,SAASkC,GAAiB,UAAUA,EAAA;AAAA,EAC/C,SAAS;AAAA,IACL,SAASA;AAAA,IACT,UAAU,EAAE,OAAO/B,IAAgB,SAASH,EAAA;AAAA,EAAwB;AAE5E,GAEMoC,KAAiC,EAAE,eAAe7B,GAAA,GAElD8B,KAAc;AAAA,GACjBV,CAAU;AAAA;AAAA;AAAA,GAGVA,CAAU,OAAOD,CAAW;AAAA;AAAA,aAElBhB,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMlBiB,CAAU,aAAaD,CAAW;AAAA;AAAA;AAAA;AAAA,GAIlCC,CAAU;AAAA;AAAA,IAIPW,KAAS,CAACC,MACZ,OAAO,QAAQA,CAAY,EACtB,IAAI,CAAC,CAACC,GAAUC,CAAK,MAAM,OAAOD,CAAQ,KAAKC,CAAK,GAAG,EACvD,KAAK;AAAA,CAAI,GAEZC,KAAc,CAACC,GAAgCC,MACjDA,MAAU,UACJ,IAAIjB,CAAU,kBAAkBgB,CAAO,mDACvC,IAAIhB,CAAU,kBAAkBgB,CAAO,kBAAkBC,CAAK,MAElEC,KAAU,CACZF,GACAC,GACAL,MACS,GAAGG,GAAYC,GAASC,CAAK,CAAC;AAAA,EAAON,GAAOC,CAAY,CAAC;AAAA,IAEhEO,KAAe,OAAO,KAAKb,CAAQ,EACpC;AAAA,EAAQ,CAACU,MACL,OAAO,KAAKV,EAASU,CAAO,CAAC,EAAkB;AAAA,IAAI,CAACC,MACjDC,GAAQF,GAASC,GAAOX,EAASU,CAAO,EAAEC,CAAK,CAAC;AAAA,EAAA;AAExD,EACC,KAAK;AAAA,CAAI,GAERG,KAAW,IAAIpB,CAAU;AAAA,EAAkDW;AAAA,EAC7EF;AACJ,CAAC;AAAA,IAEKY,KAAW,GAAGD,EAAQ;AAAA,EAAKD,EAAW;AAAA,EAAKT,EAAW,IAEtDY,KAAyC;AAAA,EAC3C,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,OAAOtD;AAAA,EACP,YAAY;AAChB,GAEMuD,KAAmC,EAAE,OAAOvD,GAAO,eAAe,SAAA,GAElEwD,IAAU,gEAEVC,KAA2C,EAAE,OAAOD,EAAA,GACpDE,KAA0C,EAAE,OAAOF,GAAS,SAAS,IAAA,GAErEG,KAAsB,IACtBC,KAAyB,IAEzBC,KAAwC;AAAA,EAC1C,OAAO;AACX,GAEMC,KAAuB,mBACvBC,KAAyB,IACzBC,KAA4C;AAAA,EAC9C,OAAO9D;AAAA,EACP,SAAS;AACb,GAIM+D,KAA0B,MAC5B,gBAAAC,EAACC,IAAA,EAAQ,MAAML,IAAsB,WAAU,QAAO,kBAAkB,IACpE,UAAA,gBAAAI,EAAC,UAAK,MAAK,OAAM,cAAYJ,IAAsB,OAAOE,IACtD,4BAACI,IAAA,EAAQ,MAAML,GAAA,CAAwB,EAAA,CAC3C,EAAA,CACJ,GAGEM,KAAU,CAACC,MAAuD;AACpE,QAAMC,IAAUD,EAAI,OAAO,CAACE,MAAqBA,MAAO,MAAS;AACjE,SAAOD,EAAQ,SAAS,IAAIA,EAAQ,KAAK,GAAG,IAAI;AACpD,GAGME,KAAgD,CAAC;AAAA,EACnD,OAAA3B;AAAA,EACA,OAAA4B;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAA5B,IAAU;AAAA,EACV,SAAA6B;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC,KAAU;AAAA,EACV,cAAAC,KAAe;AAAA,EACf,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC;AACJ,MAAM;AACF,QAAM,EAAE,QAAAC,GAAA,IAAWC,GAAA,GACbC,KAAY,CAACb,KAAY,CAACI,GAE1BU,IAAUC,GAAuB,IAAI;AAC3C,EAAAC,GAAqBF,GAAS3C,IAAUpB,EAAQ;AAEhD,QAAMkE,IAAa,uBAAuBC,GAAA,EAAQ,QAAQ,mBAAmB,EAAE,CAAC,IAC1EC,IAAoB,GAAGF,CAAU,YACjCG,IAAY,GAAGH,CAAU,YACzBI,IAAW,GAAGJ,CAAU,WACxBK,IAAU,GAAGL,CAAU,UACvBM,IAAgB,GAAGN,CAAU,gBAC7BO,IAAU,GAAGP,CAAU,UAEvBQ,KAAajB,IACb,SACArB,GAAQ,CAACQ,IAAUyB,IAAY,QAAWE,GAAS1B,IAASyB,IAAW,MAAS,CAAC,GACjFK,KAAcvC,GAAQ;AAAA,IACxBU,IAAc0B,IAAgB;AAAA,IAC9BzB,IAAa0B,IAAU;AAAA,EAAA,CAC1B;AAED,MAAIvB;AACA,WACI,gBAAA0B;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKb;AAAA,QACL,MAAK;AAAA,QACL,aAAU;AAAA,QACV,aAAU;AAAA,QACV,gBAAa;AAAA,QACb,cAAW;AAAA,QACX,WAAW,GAAGhE,CAAU,wEAAwE2D,CAAS,GAAG,KAAA;AAAA,QAC5G,OACI;AAAA,UACI,OAAO/F;AAAA,UACP,QAAQC;AAAA,UACR,cAAcE;AAAA,UACd,WAAW;AAAA,UACX,YAAY,GAAG4D,EAAmB;AAAA,UAClC,eAAe,GAAGC,EAAsB;AAAA,UACxC,gBAAgB;AAAA,UAChB,CAAC1B,CAAgB,GAAGsB;AAAA,UACpB,CAACrB,CAAa,GAAG1B;AAAA,UACjB,GAAGmF;AAAA,QAAA;AAAA,QAMX,UAAA;AAAA,UAAA,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW9E;AAAA,cACX,OAAOV;AAAA,cACP,QAAQC;AAAA,cACR,SAAS,OAAOD,CAAe,IAAIC,CAAgB;AAAA,cACnD,MAAK;AAAA,cACL,eAAY;AAAA,cAEZ,UAAA;AAAA,gBAAA,gBAAA4C,EAAC,QAAA,EACG,UAAA,gBAAA2C,EAAC,kBAAA,EAAe,IAAIR,GAAmB,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC3D,UAAA;AAAA,kBAAA,gBAAAnC,EAAC,QAAA,EAAK,QAAO,KAAI,OAAO,EAAE,WAAW,OAAO/B,CAAa,IAAA,EAAI,CAAG;AAAA,kBAChE,gBAAA+B,EAAC,UAAK,QAAO,KAAI,OAAO,EAAE,WAAWxD,IAAqB,CAAG;AAAA,gBAAA,EAAA,CACjE,EAAA,CACJ;AAAA,gBACA,gBAAAwD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,GAAGpC;AAAA,oBACH,wBAAqB;AAAA,oBACrB,OAAO,EAAE,MAAM,QAAQuE,CAAiB,IAAA;AAAA,kBAAI;AAAA,gBAAA;AAAA,gBAEhD,gBAAAnC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,GAAGrC;AAAA,oBACH,wBAAqB;AAAA,oBACrB,aAAab;AAAA,oBACb,OAAO,EAAE,MAAM,QAAQ,QAAQ,OAAOkB,CAAgB,IAAA;AAAA,kBAAI;AAAA,gBAAA;AAAA,cAC9D;AAAA,YAAA;AAAA,UAAA;AAAA,UAEJ,gBAAAgC,EAAC4C,KAAK,MAAK,SAAQ,YAAW,aAAY,OAAOrD,IAC5C,UAAA2B,GAAA,CACL;AAAA,UACCC,IACG,gBAAAnB,EAAC4C,GAAA,EAAK,MAAK,UAAS,YAAW,aAAY,OAAOpD,IAC7C,UAAA2B,EAAA,CACL,IACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAKhB,QAAM0B,IAAgB/D,MAAY,WAE5BgE,KAAexE,GAASQ,CAAO,EAAEkC,IAAW,aAAa,SAAS;AAExE,SACI,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKb;AAAA,MACL,gBAAchD;AAAA,MACd,eAAa6C,KAAS,SAAS;AAAA,MAC/B,cAAYX,IAAW,aAAa;AAAA,MACpC,kBAAgBa,KAAY,KAAK;AAAA,MACjC,WAAW,GAAG/D,CAAU,sDAAsDiF,EAAiB,IAAItB,CAAS,GAAG,KAAA;AAAA,MAC/G,OAAO;AAAA,QACH,OAAO/F;AAAA,QACP,QAAQC;AAAA,QACR,cAAcE;AAAA,QACd,WAAW;AAAA,QACX,GAAG6F;AAAA,MAAA;AAAA,MAGN,UAAA;AAAA,QAAAV,IACG,gBAAA2B;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW9E;AAAA,YACX,OAAOV;AAAA,YACP,QAAQC;AAAA,YACR,SAAS,OAAOD,CAAe,IAAIC,CAAgB;AAAA,YACnD,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAA4C,EAAC,QAAA,EACG,UAAA,gBAAA2C,EAAC,kBAAA,EAAe,IAAIR,GAAmB,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC3D,UAAA;AAAA,gBAAA,gBAAAnC,EAAC,QAAA,EAAK,QAAO,KAAI,OAAO,EAAE,WAAW,OAAO/B,CAAa,IAAA,EAAI,CAAG;AAAA,gBAChE,gBAAA+B,EAAC,UAAK,QAAO,KAAI,OAAO,EAAE,WAAWxD,IAAqB,CAAG;AAAA,cAAA,EAAA,CACjE,EAAA,CACJ;AAAA,cACA,gBAAAwD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,GAAGpC;AAAA,kBACH,wBAAqB;AAAA,kBACrB,OAAO,EAAE,MAAM,QAAQuE,CAAiB,IAAA;AAAA,gBAAI;AAAA,cAAA;AAAA,cAEhD,gBAAAnC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,GAAGrC;AAAA,kBACH,wBAAqB;AAAA,kBACrB,aAAab;AAAA,kBACb,OAAO,EAAE,MAAM,QAAQ,QAAQ,OAAOkB,CAAgB,IAAA;AAAA,gBAAI;AAAA,cAAA;AAAA,YAC9D;AAAA,UAAA;AAAA,QAAA,IAEJ;AAAA,QACJ,gBAAA2E;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAY/D;AAAA,YACZ,gBAAcoC;AAAA,YACd,cAAYQ;AAAA,YACZ,mBAAiBiB;AAAA,YACjB,oBAAkBC;AAAA,YAClB,iBAAetB,KAAY;AAAA,YAC3B,UAAUG,OAAaP,IAAW,IAAI;AAAA,YACtC,SAAS,MAAM;AACX,cAAII,KAAYJ,KAGhBM,KAAA,QAAAA,EAAW1C;AAAA,YACf;AAAA,YACA,WAAW,4GACPwC,IAAW,uBAAuB,gBACtC;AAAA,YACA,OAAO,EAAE,cAAcvF,EAAA;AAAA,YAIvB,UAAA;AAAA,cAAA,gBAAAmE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAW,6CACPe,IAAU,cAAc,MAC5B;AAAA,kBAEA,UAAA,gBAAA4B,EAAC,OAAA,EAAI,WAAU,qCACV,UAAA;AAAA,oBAAAE,IACG,gBAAAF,EAAC,QAAA,EAAK,IAAIL,GAAS,WAAU,qCACxB,UAAA;AAAA,sBAAA7B,IACG,gBAAAT;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACG,WAAU;AAAA,0BACV,OAAOL;AAAA,0BAEN,UAAAc;AAAA,wBAAA;AAAA,sBAAA,IAEL;AAAA,sBACHC,sBACI,QAAA,EAAK,WAAU,8BACZ,UAAA,gBAAAV,EAACD,IAAA,EAAc,GACnB,IACA;AAAA,sBACJ,gBAAAC,EAACgD,GAAA,EAAiB,MAAMxC,GACpB,UAAA,gBAAAR;AAAA,wBAAC4C;AAAA,wBAAA;AAAA,0BACG,MAAK;AAAA,0BACL,YAAW;AAAA,0BACX,OAAOvB,IAAS,EAAE,OAAOvF,MAAU;AAAA,0BAElC,UAAA0E;AAAA,wBAAA;AAAA,sBAAA,EACL,CACJ;AAAA,oBAAA,EAAA,CACJ,IACA;AAAA,oBACHG,IACG,gBAAAX,EAAC,QAAA,EAAK,IAAIoC,GAAW,WAAU,gBAC3B,UAAA,gBAAApC,EAAC4C,GAAA,EAAK,MAAK,UAAS,YAAW,aAAY,OAAOE,IAC7C,UAAAnC,EAAA,CACL,GACJ,IACA;AAAA,oBACHC,IACG,gBAAAZ,EAAC,QAAA,EAAK,IAAIqC,GAAU,WAAU,gBAC1B,UAAA,gBAAArC;AAAA,sBAACiD;AAAA,sBAAA;AAAA,wBACG,OAAOrC,EAAO;AAAA,wBACd,MAAMA,EAAO,QAAQ;AAAA,wBACrB,eAAc;AAAA,wBACd,aAAY;AAAA,sBAAA;AAAA,oBAAA,GAEpB,IACA;AAAA,kBAAA,EAAA,CACR;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,gBAAA+B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAW,qDACPE,IAAgB,gBAAgB,iBACpC;AAAA,kBAEC,UAAA;AAAA,oBAAAA,IAAgB,OACb,gBAAAF,EAAC,OAAA,EAAI,IAAIL,GAAS,WAAU,qCACvB,UAAA;AAAA,sBAAA7B,IACG,gBAAAT;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACG,WAAU;AAAA,0BACV,OAAOL;AAAA,0BAEN,UAAAc;AAAA,wBAAA;AAAA,sBAAA,IAEL;AAAA,sBACHC,sBACI,QAAA,EAAK,WAAU,8BACZ,UAAA,gBAAAV,EAACD,IAAA,EAAc,GACnB,IACA;AAAA,sBACJ,gBAAAC,EAACgD,GAAA,EAAiB,MAAMxC,GACpB,UAAA,gBAAAR;AAAA,wBAAC4C;AAAA,wBAAA;AAAA,0BACG,MAAK;AAAA,0BACL,YAAW;AAAA,0BACX,OAAOvB,IAAS,EAAE,OAAOvF,MAAU;AAAA,0BAElC,UAAA0E;AAAA,wBAAA;AAAA,sBAAA,EACL,CACJ;AAAA,oBAAA,GACJ;AAAA,oBAEHK,IACG,gBAAAb,EAAC,QAAA,EAAK,IAAIuC,GAAe,WAAU,iBAC/B,UAAA,gBAAAvC,EAAC4C,GAAA,EAAK,MAAK,UAAS,OAAOxD,IACtB,UAAAyB,GACL,GACJ,IACA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGH,QAAA,EAAK,IAAI2B,GAAS,WAAU,4CACxB,UAAA1B,IACG,gBAAAd,EAAC4C,GAAA,EAAK,MAAK,UAAS,YAAW,aAAY,OAAOvD,IAC7C,UAAAyB,EAAA,CACL,IACA,MACR;AAAA,QAICC,IACG,gBAAAf;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gCAA6B;AAAA,YAC7B,WAAU;AAAA,YAET,UAAAe;AAAA,UAAA;AAAA,QAAA,IAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
1	+ {"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useId, useRef } from 'react';\nimport Button from './Button';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING_WITHIN } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n label: string;\n /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". /\n type?: TagType;\n}\n\n/* The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n * profile with unsaved changes. /\nexport type SelectableCardVariant = 'profile' \| 'library' \| 'editing';\n\nexport interface SelectableCardProps {\n /* Identifies the card inside its group; handed back to `onSelect`. /\n value: string;\n title: string;\n /* Leading glyph on the title line, e.g. a library/book icon. /\n titleIcon?: React.ReactNode;\n /* Pins the card as the account default, marked beside the title. /\n isDefault?: boolean;\n /* Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. /\n variant?: SelectableCardVariant;\n /* Small label above the title (\"Profile\", \"Explore\"). /\n eyebrow?: string;\n /* Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. /\n status?: SelectableCardStatus;\n /* Supporting copy under the title, clamped to two lines. /\n description?: string;\n /* Bottom-left summary (\"16 Actions\", \"10 Selected\"). /\n countLabel?: string;\n /* Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n * xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. /\n actions?: React.ReactNode;\n /* Renders an x after `actions`, tinted like the eyebrow, that calls this. /\n onDismiss?: () => void;\n /* Names the x for assistive tech and its tooltip. /\n dismissLabel?: string;\n /* Disables the x and shows this as its tooltip instead. /\n dismissDisabledReason?: string;\n selected?: boolean;\n /* Replaces the card's content with a centred in-progress message. /\n loading?: boolean;\n loadingLabel?: string;\n loadingHint?: string;\n /* Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. /\n disabled?: boolean;\n /* Mutes the title without blocking selection. /\n dimmed?: boolean;\n onSelect?: (value: string) => void;\n /* Tab stop for the card. /\n tabIndex?: number;\n /* Replaces the generated accessible name (eyebrow + title + status). /\n 'aria-label'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/* How far a selected card's outline sweeps past its own edge. The strip keeps this much\n * clear of its scroller's clip. /\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/* Weight of the strip's bottom rule, which a selected card's flare reaches down through. /\nexport const STRIP_RULE_PX = 2;\n\n/* Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n * stops half a stroke inside the flare box. /\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. /\nconst pathTo = (base: number): string => {\n const inset = STROKE_PX / 2;\n const left = FLARE_PX + inset;\n const right = FLARE_PX + CARD_WIDTH_PX - inset;\n const top = inset;\n const r = CORNER_PX - inset;\n return [\n `M${left - FLARE_PX} ${base}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n `L${left} ${top + r}`,\n `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n `L${right - r} ${top}`,\n `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n `L${right} ${base - FLARE_PX}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' \| 'hover' \| 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n 'background-color': HOVER_SURFACE_FILL,\n 'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n 'background-color': RESTING_SURFACE,\n};\n\n/* Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. /\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n profile: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n [TINT_PROPERTY]: PROFILE_TINT,\n },\n },\n library: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n [TINT_PROPERTY]: LIBRARY_TINT,\n },\n },\n editing: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: EDITING_ACCENT,\n [TINT_PROPERTY]: EDITING_TINT,\n },\n },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n profile: {\n resting: RESTING_EYEBROW,\n selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n editing: {\n resting: RESTING_EYEBROW,\n selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n position: absolute;\n left: -${FLARE_PX}px;\n top: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n.${ROOT_CLASS} > :not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n position: relative;\n z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n Object.entries(declarations)\n .map(([property, value]) => ` ${property}: ${value};`)\n .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n state === 'hover'\n ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n variant: SelectableCardVariant,\n state: CardState,\n declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n .flatMap((variant) =>\n (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n ruleFor(variant, state, SURFACES[variant][state]),\n ),\n )\n .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n color: MUTED,\n lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n color: 'var(--malachite-text-primary)',\n};\n\nconst DISMISS_ICON_BOX = 'inline-flex items-center justify-center [&_svg]:size-[10px]!';\nconst DISABLED_DISMISS_STYLE: React.CSSProperties = { color: MUTED };\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n color: PROFILE_ACCENT,\n display: 'inline-flex',\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n * travels by `aria-describedby`, which describes rather than names. /\nconst DefaultMarker: React.FC = () => (\n <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n <span role=\"img\" aria-label={DEFAULT_MARKER_LABEL} style={DEFAULT_MARKER_STYLE}>\n <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n </span>\n </Tooltip>\n);\n\nconst joinIds = (ids: Array<string \| undefined>): string \| undefined => {\n const present = ids.filter((id): id is string => id !== undefined);\n return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/* A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. /\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n value,\n title,\n titleIcon,\n isDefault = false,\n variant = 'profile',\n eyebrow,\n status,\n description,\n countLabel,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n dismissDisabledReason,\n selected = false,\n loading = false,\n loadingLabel = 'Loading…',\n loadingHint,\n disabled = false,\n dimmed = false,\n onSelect,\n tabIndex,\n 'aria-label': ariaLabel,\n className = '',\n style,\n}) => {\n const { pinned } = useCardStripSlot();\n const hoverable = !selected && !disabled;\n\n const rootRef = useRef<HTMLDivElement>(null);\n useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n const outlineGradientId = `${instanceId}-outline`;\n const eyebrowId = `${instanceId}-eyebrow`;\n const statusId = `${instanceId}-status`;\n const titleId = `${instanceId}-title`;\n const descriptionId = `${instanceId}-description`;\n const countId = `${instanceId}-count`;\n\n const labelledBy = ariaLabel\n ? undefined\n : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n const describedBy = joinIds([\n description ? descriptionId : undefined,\n countLabel ? countId : undefined,\n ]);\n\n if (loading) {\n return (\n <div\n ref={rootRef}\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n data-variant=\"editing\"\n data-state=\"selected\"\n className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n style={\n {\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n paddingTop: `${PENDING_BODY_TOP_PX}px`,\n paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n justifyContent: 'center',\n [OUTLINE_PROPERTY]: PENDING,\n [TINT_PROPERTY]: EDITING_TINT,\n ...style,\n } as React.CSSProperties\n }\n >\n {/ The same outline a selected card wears: this IS the selection while a profile\n is being built, so it has to break the strip's rule rather than sit on it. /}\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n {loadingLabel}\n </Text>\n {loadingHint ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n {loadingHint}\n </Text>\n ) : null}\n </div>\n );\n }\n\n const titleInTopRow = variant === 'library';\n\n const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n const hasCornerCluster = Boolean(actions) \|\| Boolean(onDismiss);\n const isDismissDisabled = dismissDisabledReason !== undefined;\n const eyebrowRowEnd =\n actions && onDismiss ? 'pr-[56px]' : hasCornerCluster ? 'pr-[26px]' : 'pr-1';\n\n return (\n <div\n ref={rootRef}\n data-variant={variant}\n data-pinned={pinned ? 'true' : 'false'}\n data-state={selected ? 'selected' : 'resting'}\n data-hoverable={hoverable ? '' : undefined}\n className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN} ${className}`.trim()}\n style={{\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n ...style,\n }}\n >\n {selected ? (\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n ) : null}\n <button\n type=\"button\"\n role=\"radio\"\n data-value={value}\n aria-checked={selected}\n aria-label={ariaLabel}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n aria-disabled={disabled \|\| undefined}\n tabIndex={tabIndex ?? (selected ? 0 : -1)}\n onClick={() => {\n if (disabled \|\| selected) {\n return;\n }\n onSelect?.(value);\n }}\n className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n style={{ borderRadius: CARD_RADIUS }}\n >\n {/ 26px is one xsmall icon button plus a gap, 56px is `actions` and the x: the\n cluster stands over the end of this row, so the eyebrow stops short of it. /}\n <div className={`flex h-[13px] shrink-0 items-center gap-2 ${eyebrowRowEnd}`}>\n <div className=\"flex min-w-0 items-center gap-1.5\">\n {titleInTopRow ? (\n <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </span>\n ) : null}\n {eyebrow ? (\n <span id={eyebrowId} className=\"flex min-w-0\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n {eyebrow}\n </Text>\n </span>\n ) : null}\n {status ? (\n <span id={statusId} className=\"flex min-w-0\">\n <Tag\n value={status.label}\n type={status.type ?? 'default'}\n textTransform=\"none\"\n paddingSize=\"compact\"\n />\n </span>\n ) : null}\n </div>\n </div>\n\n <div\n className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n titleInTopRow ? 'justify-end' : 'justify-between'\n }`}\n >\n {titleInTopRow ? null : (\n <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </div>\n )}\n {description ? (\n <span id={descriptionId} className=\"block min-w-0\">\n <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n {description}\n </Text>\n </span>\n ) : null}\n </div>\n </button>\n\n <span id={countId} className=\"min-w-0 self-end truncate pr-4 pb-3 pl-4\">\n {countLabel ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n {countLabel}\n </Text>\n ) : null}\n </span>\n\n {/ Lifted out of the flow rather than given a grid cell, so it can sit on the\n eyebrow row — which belongs to the control and cannot hold a second one. */}\n {hasCornerCluster ? (\n <div\n data-selectable-card-actions=\"\"\n className=\"absolute top-3 right-4 flex h-[13px] shrink-0 items-center gap-2.5\"\n >\n {actions}\n {onDismiss ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"xsmall\"\n iconOnly\n aria-label={dismissLabel}\n tooltip={dismissDisabledReason ?? dismissLabel}\n disabled={isDismissDisabled}\n className=\"shrink-0\"\n onClick={onDismiss}\n >\n <span\n className={DISMISS_ICON_BOX}\n style={isDismissDisabled ? DISABLED_DISMISS_STYLE : eyebrowStyle}\n >\n <DismissIcon />\n </span>\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","DISMISS_ICON_BOX","DISABLED_DISMISS_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","DefaultMarker","jsx","Tooltip","PinIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","actions","onDismiss","dismissLabel","dismissDisabledReason","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","countId","labelledBy","describedBy","jsxs","Text","titleInTopRow","eyebrowStyle","hasCornerCluster","isDismissDisabled","eyebrowRowEnd","FOCUS_RING_WITHIN","TruncatedTooltip","Tag","Button","DismissIcon"],"mappings":"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"}

package/dist/components/SelectionBar.js CHANGED Viewed

@@ -29,7 +29,7 @@ const T = (r) => String(r.value) === "" ? r.label : `${r.value} ${r.label}`, b =
       a.current !== null && (cancelAnimationFrame(a.current), a.current = null), t.current && (clearTimeout(t.current), t.current = null);
     };
   }, [r]);
-  const y = N === "sticky", u = d !== void 0 && d !== "", x = `sticky bottom-0 z-30${f ? " pt-4 pb-6" : ""}`, $ = /* @__PURE__ */ n("div", { className: k, style: { boxShadow: g }, children: [
+  const y = N === "sticky", u = d !== void 0 && d !== "", x = `sticky bottom-0 z-30 mt-auto${f ? " pt-4 pb-6" : ""}`, $ = /* @__PURE__ */ n("div", { className: k, style: { boxShadow: g }, children: [
     i.length > 0 && /* @__PURE__ */ l(
       "p",
       {

package/dist/components/SelectionBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionBar.js","sources":["../../src/components/SelectionBar.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n PILL_BUTTON_BASE,\n PILL_BUTTON_CLASS,\n PILL_DIVIDER,\n PILL_MUTED_TEXT,\n PILL_NOTICE_SHADOW,\n PILL_NOTICE_SLEEVE,\n PILL_NOTICE_TEXT,\n PILL_SHADOW,\n PILL_SHEET_CSS,\n PILL_SHEET_ID,\n PILL_SURFACE,\n PILL_TRACK_CLASS,\n PILL_TRANSITION_MS,\n type SelectionBarCount,\n type SelectionBarEmphasis,\n} from './selectionBarChrome';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type { SelectionBarCount, SelectionBarEmphasis };\n\nexport interface SelectionBarAction {\n label: string;\n onClick: () => void;\n /** 'primary' commits the pending change; 'secondary' (the default) is a filled chip;\n * 'quiet' is unfilled and takes a wash on hover. /\n emphasis?: SelectionBarEmphasis;\n icon?: React.ReactNode;\n iconPosition?: 'start' \| 'end';\n disabled?: boolean;\n /* Renders a separator glyph before this action. /\n dividerBefore?: boolean;\n}\n\nexport interface SelectionBarProps {\n /* Drives the mount: the bar animates in on true and animates out on false. /\n open: boolean;\n counts: SelectionBarCount[];\n actions: SelectionBarAction[];\n /* 'sticky' keeps the bar in view while its container scrolls; render it as the last child\n * of that content, with no `overflow: hidden` on any ancestor. /\n placement?: 'sticky' \| 'inline';\n /\n Wraps the bar in a warning sleeve carrying this message, for state the bar is\n * reporting rather than an action it offers — e.g. that the selection is unsaved.\n * It leads the announcement. An empty string renders no sleeve.\n /\n notice?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n className?: string;\n}\n\n/* A count reads as one phrase; an empty `value` carries a bare message instead. /\nconst countText = (count: SelectionBarCount): string =>\n String(count.value) === '' ? count.label : `${count.value} ${count.label}`;\n\nconst summarise = (counts: SelectionBarCount[]): string => counts.map(countText).join(', ');\n\n/* A notice is the reason the bar is up, so it leads the announcement. /\nconst announcement = (notice: string \| undefined, counts: SelectionBarCount[]): string =>\n notice === undefined \|\| notice === ''\n ? summarise(counts)\n : `${notice} ${summarise(counts)}`.trim();\n\n/\n A bar reporting a pending, not-yet-written selection and the actions that resolve it. Every\n * action destroys the button just pressed, so an `onClick` that ends the pending state must\n * also move focus.\n /\nexport const SelectionBar: React.FC<SelectionBarProps> = ({\n open,\n counts,\n actions,\n placement = 'sticky',\n notice,\n 'aria-label': ariaLabel = 'Pending changes',\n 'aria-labelledby': ariaLabelledBy,\n className = '',\n}) => {\n const trackRef = useRef<HTMLDivElement>(null);\n const [isMounted, setIsMounted] = useState(open);\n const [isVisible, setIsVisible] = useState(open);\n const frameRef = useRef<number \| null>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n useAdoptedStyleSheet(trackRef, PILL_SHEET_CSS, PILL_SHEET_ID);\n\n useEffect(() => {\n if (open) {\n setIsMounted(true);\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n setIsVisible(true);\n });\n } else {\n // The browser refuses `aria-hidden` on a subtree still holding focus, so a caller\n // that forgets to move it would trap the keyboard here.\n const active = document.activeElement;\n if (active instanceof HTMLElement && trackRef.current?.contains(active)) {\n active.blur();\n }\n setIsVisible(false);\n timerRef.current = setTimeout(() => {\n timerRef.current = null;\n setIsMounted(false);\n }, PILL_TRANSITION_MS);\n }\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [open]);\n\n const isSticky = placement === 'sticky';\n const hasNotice = notice !== undefined && notice !== '';\n const stickyClass = `sticky bottom-0 z-30${isMounted ? ' pt-4 pb-6' : ''}`;\n\n const pill = (\n <div className={PILL_SURFACE} style={{ boxShadow: PILL_SHADOW }}>\n {counts.length > 0 && (\n <p\n aria-hidden=\"true\"\n className=\"m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]\"\n >\n {counts.map((count, index) => (\n <Fragment key={count.label}>\n {index > 0 && <span className={PILL_MUTED_TEXT}>•</span>}\n <span>{countText(count)}</span>\n </Fragment>\n ))}\n </p>\n )}\n {actions.map((action) => (\n <Fragment key={action.label}>\n {action.dividerBefore && (\n <span aria-hidden=\"true\" className={`${PILL_DIVIDER} ${PILL_MUTED_TEXT}`}>\n \|\n </span>\n )}\n <button\n type=\"button\"\n disabled={action.disabled}\n tabIndex={isVisible ? undefined : -1}\n onClick={action.onClick}\n className={`${PILL_BUTTON_BASE} ${PILL_BUTTON_CLASS}--${action.emphasis ?? 'secondary'}`}\n >\n {action.icon && action.iconPosition !== 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n {action.label}\n {action.icon && action.iconPosition === 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n </button>\n </Fragment>\n ))}\n </div>\n );\n\n return (\n // The live region has to exist BEFORE its text changes or the first announcement is dropped.\n <div\n ref={trackRef}\n className={`${PILL_TRACK_CLASS} pointer-events-none flex w-full justify-center ${isSticky ? stickyClass : 'relative'} ${className}`.trim()}\n style={{ opacity: isVisible ? 1 : 0 }}\n >\n <p className=\"sr-only\" role=\"status\">\n {isVisible ? announcement(notice, counts) : ''}\n </p>\n {isMounted && (\n <div\n role=\"group\"\n aria-label={ariaLabelledBy ? undefined : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-hidden={isVisible ? undefined : true}\n className={isVisible ? 'pointer-events-auto' : undefined}\n >\n {/ Keep the wrapper stable: changing the pill's parent remounts it and drops focus\n from the action that raised the notice. */}\n <div\n className={hasNotice ? PILL_NOTICE_SLEEVE : undefined}\n style={hasNotice ? { boxShadow: PILL_NOTICE_SHADOW } : undefined}\n >\n {hasNotice && (\n <p aria-hidden=\"true\" className={PILL_NOTICE_TEXT}>\n {notice}\n </p>\n )}\n {pill}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default SelectionBar;\n"],"names":["countText","count","summarise","counts","announcement","notice","SelectionBar","open","actions","placement","ariaLabel","ariaLabelledBy","className","trackRef","useRef","isMounted","setIsMounted","useState","isVisible","setIsVisible","frameRef","timerRef","useAdoptedStyleSheet","PILL_SHEET_CSS","PILL_SHEET_ID","useEffect","active","_a","PILL_TRANSITION_MS","isSticky","hasNotice","stickyClass","pill","PILL_SURFACE","PILL_SHADOW","jsx","index","Fragment","PILL_MUTED_TEXT","action","PILL_DIVIDER","jsxs","PILL_BUTTON_BASE","PILL_BUTTON_CLASS","PILL_TRACK_CLASS","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT"],"mappings":"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"}
1	+ {"version":3,"file":"SelectionBar.js","sources":["../../src/components/SelectionBar.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from 'react';\nimport {\n PILL_BUTTON_BASE,\n PILL_BUTTON_CLASS,\n PILL_DIVIDER,\n PILL_MUTED_TEXT,\n PILL_NOTICE_SHADOW,\n PILL_NOTICE_SLEEVE,\n PILL_NOTICE_TEXT,\n PILL_SHADOW,\n PILL_SHEET_CSS,\n PILL_SHEET_ID,\n PILL_SURFACE,\n PILL_TRACK_CLASS,\n PILL_TRANSITION_MS,\n type SelectionBarCount,\n type SelectionBarEmphasis,\n} from './selectionBarChrome';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type { SelectionBarCount, SelectionBarEmphasis };\n\nexport interface SelectionBarAction {\n label: string;\n onClick: () => void;\n /** 'primary' commits the pending change; 'secondary' (the default) is a filled chip;\n * 'quiet' is unfilled and takes a wash on hover. /\n emphasis?: SelectionBarEmphasis;\n icon?: React.ReactNode;\n iconPosition?: 'start' \| 'end';\n disabled?: boolean;\n /* Renders a separator glyph before this action. /\n dividerBefore?: boolean;\n}\n\nexport interface SelectionBarProps {\n /* Drives the mount: the bar animates in on true and animates out on false. /\n open: boolean;\n counts: SelectionBarCount[];\n actions: SelectionBarAction[];\n /* 'sticky' keeps the bar in view while its container scrolls; render it as the last child\n * of that content, with no `overflow: hidden` on any ancestor. /\n placement?: 'sticky' \| 'inline';\n /\n Wraps the bar in a warning sleeve carrying this message, for state the bar is\n * reporting rather than an action it offers — e.g. that the selection is unsaved.\n * It leads the announcement. An empty string renders no sleeve.\n /\n notice?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n className?: string;\n}\n\n/* A count reads as one phrase; an empty `value` carries a bare message instead. /\nconst countText = (count: SelectionBarCount): string =>\n String(count.value) === '' ? count.label : `${count.value} ${count.label}`;\n\nconst summarise = (counts: SelectionBarCount[]): string => counts.map(countText).join(', ');\n\n/* A notice is the reason the bar is up, so it leads the announcement. /\nconst announcement = (notice: string \| undefined, counts: SelectionBarCount[]): string =>\n notice === undefined \|\| notice === ''\n ? summarise(counts)\n : `${notice} ${summarise(counts)}`.trim();\n\n/\n A bar reporting a pending, not-yet-written selection and the actions that resolve it. Every\n * action destroys the button just pressed, so an `onClick` that ends the pending state must\n * also move focus.\n /\nexport const SelectionBar: React.FC<SelectionBarProps> = ({\n open,\n counts,\n actions,\n placement = 'sticky',\n notice,\n 'aria-label': ariaLabel = 'Pending changes',\n 'aria-labelledby': ariaLabelledBy,\n className = '',\n}) => {\n const trackRef = useRef<HTMLDivElement>(null);\n const [isMounted, setIsMounted] = useState(open);\n const [isVisible, setIsVisible] = useState(open);\n const frameRef = useRef<number \| null>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n useAdoptedStyleSheet(trackRef, PILL_SHEET_CSS, PILL_SHEET_ID);\n\n useEffect(() => {\n if (open) {\n setIsMounted(true);\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n setIsVisible(true);\n });\n } else {\n // The browser refuses `aria-hidden` on a subtree still holding focus, so a caller\n // that forgets to move it would trap the keyboard here.\n const active = document.activeElement;\n if (active instanceof HTMLElement && trackRef.current?.contains(active)) {\n active.blur();\n }\n setIsVisible(false);\n timerRef.current = setTimeout(() => {\n timerRef.current = null;\n setIsMounted(false);\n }, PILL_TRANSITION_MS);\n }\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [open]);\n\n const isSticky = placement === 'sticky';\n const hasNotice = notice !== undefined && notice !== '';\n const stickyClass = `sticky bottom-0 z-30 mt-auto${isMounted ? ' pt-4 pb-6' : ''}`;\n\n const pill = (\n <div className={PILL_SURFACE} style={{ boxShadow: PILL_SHADOW }}>\n {counts.length > 0 && (\n <p\n aria-hidden=\"true\"\n className=\"m-0 flex items-center gap-2 text-[13px] leading-[1.6] tracking-[0.13px]\"\n >\n {counts.map((count, index) => (\n <Fragment key={count.label}>\n {index > 0 && <span className={PILL_MUTED_TEXT}>•</span>}\n <span>{countText(count)}</span>\n </Fragment>\n ))}\n </p>\n )}\n {actions.map((action) => (\n <Fragment key={action.label}>\n {action.dividerBefore && (\n <span aria-hidden=\"true\" className={`${PILL_DIVIDER} ${PILL_MUTED_TEXT}`}>\n \|\n </span>\n )}\n <button\n type=\"button\"\n disabled={action.disabled}\n tabIndex={isVisible ? undefined : -1}\n onClick={action.onClick}\n className={`${PILL_BUTTON_BASE} ${PILL_BUTTON_CLASS}--${action.emphasis ?? 'secondary'}`}\n >\n {action.icon && action.iconPosition !== 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n {action.label}\n {action.icon && action.iconPosition === 'end' && (\n <span aria-hidden=\"true\" className=\"flex items-center\">\n {action.icon}\n </span>\n )}\n </button>\n </Fragment>\n ))}\n </div>\n );\n\n return (\n // The live region has to exist BEFORE its text changes or the first announcement is dropped.\n <div\n ref={trackRef}\n className={`${PILL_TRACK_CLASS} pointer-events-none flex w-full justify-center ${isSticky ? stickyClass : 'relative'} ${className}`.trim()}\n style={{ opacity: isVisible ? 1 : 0 }}\n >\n <p className=\"sr-only\" role=\"status\">\n {isVisible ? announcement(notice, counts) : ''}\n </p>\n {isMounted && (\n <div\n role=\"group\"\n aria-label={ariaLabelledBy ? undefined : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-hidden={isVisible ? undefined : true}\n className={isVisible ? 'pointer-events-auto' : undefined}\n >\n {/ Keep the wrapper stable: changing the pill's parent remounts it and drops focus\n from the action that raised the notice. */}\n <div\n className={hasNotice ? PILL_NOTICE_SLEEVE : undefined}\n style={hasNotice ? { boxShadow: PILL_NOTICE_SHADOW } : undefined}\n >\n {hasNotice && (\n <p aria-hidden=\"true\" className={PILL_NOTICE_TEXT}>\n {notice}\n </p>\n )}\n {pill}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default SelectionBar;\n"],"names":["countText","count","summarise","counts","announcement","notice","SelectionBar","open","actions","placement","ariaLabel","ariaLabelledBy","className","trackRef","useRef","isMounted","setIsMounted","useState","isVisible","setIsVisible","frameRef","timerRef","useAdoptedStyleSheet","PILL_SHEET_CSS","PILL_SHEET_ID","useEffect","active","_a","PILL_TRANSITION_MS","isSticky","hasNotice","stickyClass","pill","PILL_SURFACE","PILL_SHADOW","jsx","index","Fragment","PILL_MUTED_TEXT","action","PILL_DIVIDER","jsxs","PILL_BUTTON_BASE","PILL_BUTTON_CLASS","PILL_TRACK_CLASS","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT"],"mappings":"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"}

package/dist/components/SidePanel.js CHANGED Viewed

@@ -1,57 +1,58 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useState as T, useRef as s, useEffect as V } from "react";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useState as g, useRef as s, useEffect as V } from "react";
 import { createPortal as L } from "react-dom";
 import { ShadowRootWrapper as M } from "../ShadowRootWrapper.js";
-import P from "./CustomIcons/ArrowLeftIcon.js";
+import W from "./CustomIcons/ArrowLeftIcon.js";
 import j from "./CustomIcons/DismissIcon.js";
+import w from "./Typography/EllipsisText.js";
 import { useOverlayBehaviour as D, OVERLAY_ICON_BUTTON_CLASSES as I } from "./overlayBehaviour.js";
 import { OVERLAY_ELEVATED_ATTR as F, overlayIdentity as R } from "./portalOverlay.js";
-const S = 200, X = (a) => typeof a == "number" ? `${a}px` : a, K = ({
-  open: a,
+const S = 200, X = (l) => typeof l == "number" ? `${l}px` : l, Z = ({
+  open: l,
   onClose: n,
   title: i,
   subtitle: o,
   titleExtra: c,
   description: d,
-  headerDivider: w = !1,
+  headerDivider: A = !1,
   icon: m,
   headerExtra: u,
   footer: p,
   onBack: f,
-  maxWidth: A = 1080,
-  "aria-label": k,
+  maxWidth: k = 1080,
+  "aria-label": z,
   "aria-labelledby": x,
   bodyPadding: h = !0,
-  stacking: z = "default",
+  stacking: E = "default",
   children: b
 }) => {
-  const [v, y] = T(!1), [O, N] = T(!1), t = s(null), r = s(null), g = s(null), {
+  const [v, N] = g(!1), [O, y] = g(!1), t = s(null), r = s(null), T = s(null), {
     ref: _,
     isTopmost: $,
     zIndex: C,
-    elevated: E
+    elevated: P
   } = D({
-    open: a,
+    open: l,
     onClose: n,
-    elevated: z === "above-app-overlays",
-    hostRef: g
+    elevated: E === "above-app-overlays",
+    hostRef: T
   });
-  return V(() => (a ? (N(!0), r.current && (clearTimeout(r.current), r.current = null), t.current = requestAnimationFrame(() => {
-    t.current = null, y(!0);
-  })) : (y(!1), r.current = setTimeout(() => {
-    r.current = null, N(!1);
+  return V(() => (l ? (y(!0), r.current && (clearTimeout(r.current), r.current = null), t.current = requestAnimationFrame(() => {
+    t.current = null, N(!0);
+  })) : (N(!1), r.current = setTimeout(() => {
+    r.current = null, y(!1);
   }, S)), () => {
     t.current !== null && (cancelAnimationFrame(t.current), t.current = null), r.current && (clearTimeout(r.current), r.current = null);
-  }), [a]), O ? L(
+  }), [l]), O ? L(
     // Host carries the stacking context — ShadowRootWrapper's `isolation` would
     // otherwise flatten our z-index and let sticky page elements paint over us.
     /* @__PURE__ */ e(
       M,
       {
-        hostRef: g,
+        hostRef: T,
         hostStyle: { position: "relative", zIndex: C },
-        hostProps: E ? { ...R("sidepanel"), [F]: "" } : R("sidepanel"),
-        children: /* @__PURE__ */ l("div", { className: "fixed inset-0 z-[1000]", children: [
+        hostProps: P ? { ...R("sidepanel"), [F]: "" } : R("sidepanel"),
+        children: /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[1000]", children: [
           /* @__PURE__ */ e(
             "div",
             {
@@ -60,30 +61,30 @@ const S = 200, X = (a) => typeof a == "number" ? `${a}px` : a, K = ({
               className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${v ? "opacity-100" : "opacity-0"}`
             }
           ),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ a(
             "div",
             {
               ref: _,
               role: "dialog",
               "aria-modal": $ ? "true" : void 0,
               tabIndex: -1,
-              "aria-label": x ? void 0 : k ?? (typeof i == "string" ? i : void 0),
+              "aria-label": x ? void 0 : z ?? (typeof i == "string" ? i : void 0),
               "aria-labelledby": x,
               className: "absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]",
               style: {
-                width: `min(calc(100% - 16px), ${X(A)})`,
+                width: `min(calc(100% - 16px), ${X(k)})`,
                 // Inline: Tailwind translate utilities silently break inside
                 // shadow roots (see CLAUDE.md Shadow DOM caveats).
                 transform: v ? "translateX(0)" : "translateX(calc(100% + 16px))",
                 transition: `transform ${S}ms ease-in-out`
               },
               children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ a(
                   "div",
                   {
-                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${w ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${A ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
                     children: [
-                      /* @__PURE__ */ l("div", { className: "flex items-center gap-[12px]", children: [
+                      /* @__PURE__ */ a("div", { className: "flex items-center gap-[12px]", children: [
                         f ? /* @__PURE__ */ e(
                           "button",
                           {
@@ -91,16 +92,39 @@ const S = 200, X = (a) => typeof a == "number" ? `${a}px` : a, K = ({
                             "aria-label": "Back",
                             onClick: f,
                             className: I,
-                            children: /* @__PURE__ */ e(P, { size: 16 })
+                            children: /* @__PURE__ */ e(W, { size: 16 })
                           }
                         ) : null,
                         m ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: m }) : null,
-                        /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-[8px]", children: [
-                          /* @__PURE__ */ e("span", { className: "shrink-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold text-[var(--malachite-text-primary)]", children: i }),
-                          o ? /* @__PURE__ */ e("span", { className: "min-w-0 truncate text-[13px] text-[var(--malachite-text-secondary)]", children: o }) : null,
-                          c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: c }) : null
+                        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-baseline gap-[12px]", children: [
+                          /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-baseline gap-[8px]", children: [
+                            /* @__PURE__ */ a("div", { className: "flex min-w-0 items-baseline gap-[8px]", children: [
+                              /* @__PURE__ */ e("span", { className: "flex min-w-0 max-w-full shrink-0", children: /* @__PURE__ */ e(
+                                w,
+                                {
+                                  tooltip: i,
+                                  tooltipWhenTruncated: !0,
+                                  tooltipPlacement: "bottom",
+                                  className: "min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold",
+                                  children: i
+                                }
+                              ) }),
+                              o ? /* @__PURE__ */ e(
+                                w,
+                                {
+                                  tooltip: o,
+                                  tooltipWhenTruncated: !0,
+                                  tooltipPlacement: "bottom",
+                                  color: "secondary",
+                                  className: "min-w-0 text-[13px]",
+                                  children: o
+                                }
+                              ) : null
+                            ] }),
+                            c ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: c }) : null
+                          ] }),
+                          u ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-baseline", children: u }) : null
                         ] }),
-                        u ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: u }) : null,
                         /* @__PURE__ */ e(
                           "button",
                           {
@@ -134,7 +158,7 @@ const S = 200, X = (a) => typeof a == "number" ? `${a}px` : a, K = ({
   ) : null;
 };
 export {
-  K as SidePanel,
-  K as default
+  Z as SidePanel,
+  Z as default
 };
 //# sourceMappingURL=SidePanel.js.map

package/dist/components/SidePanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n open: boolean;\n /** Dismiss handler — close button, ESC, or overlay click. /\n onClose: () => void;\n title: React.ReactNode;\n /* Secondary text, inline after the title. /\n subtitle?: React.ReactNode;\n /* Content at the end of the title row, after the subtitle (e.g. a status tag). /\n titleExtra?: React.ReactNode;\n /* Block paragraph below the title row, spanning the header width. /\n description?: React.ReactNode;\n /* Divider under the header. Default: false. /\n headerDivider?: boolean;\n /* Leading header slot, typically a logo or icon. /\n icon?: React.ReactNode;\n /* Content pinned right in the header, before the close button. /\n headerExtra?: React.ReactNode;\n footer?: React.ReactNode;\n /* Renders a back button before the header icon. /\n onBack?: () => void;\n /* Maximum panel width. Default: 1080. /\n maxWidth?: number \| string;\n /* Accessible dialog name; required when `title` isn't a plain string. /\n 'aria-label'?: string;\n /* ID of a visible element naming the dialog (alternative to `aria-label`). /\n 'aria-labelledby'?: string;\n /* Whether the body gets default padding. Default: true. /\n bodyPadding?: boolean;\n /* `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. /\n stacking?: 'default' \| 'above-app-overlays';\n children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number \| string): string =>\n typeof value === 'number' ? `${value}px` : value;\n\n/\n A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n open,\n onClose,\n title,\n subtitle,\n titleExtra,\n description,\n headerDivider = false,\n icon,\n headerExtra,\n footer,\n onBack,\n maxWidth = 1080,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n bodyPadding = true,\n stacking = 'default',\n children,\n}) => {\n const [isVisible, setIsVisible] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n const frameRef = useRef<number \| null>(null);\n const unmountTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const hostRef = useRef<HTMLDivElement \| null>(null);\n const {\n ref: handlePanelRef,\n isTopmost,\n zIndex,\n elevated,\n } = useOverlayBehaviour({\n open,\n onClose,\n elevated: stacking === 'above-app-overlays',\n hostRef,\n });\n\n useEffect(() => {\n if (open) {\n setIsMounted(true);\n if (unmountTimerRef.current) {\n clearTimeout(unmountTimerRef.current);\n unmountTimerRef.current = null;\n }\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n setIsVisible(true);\n });\n } else {\n setIsVisible(false);\n unmountTimerRef.current = setTimeout(() => {\n unmountTimerRef.current = null;\n setIsMounted(false);\n }, TRANSITION_MS);\n }\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n if (unmountTimerRef.current) {\n clearTimeout(unmountTimerRef.current);\n unmountTimerRef.current = null;\n }\n };\n }, [open]);\n\n if (!isMounted) {\n return null;\n }\n\n return createPortal(\n // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n // otherwise flatten our z-index and let sticky page elements paint over us.\n <ShadowRootWrapper\n hostRef={hostRef}\n hostStyle={{ position: 'relative', zIndex }}\n hostProps={\n elevated\n ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n : overlayIdentity('sidepanel')\n }\n >\n <div className=\"fixed inset-0 z-[1000]\">\n <div\n aria-hidden=\"true\"\n onClick={onClose}\n className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n isVisible ? 'opacity-100' : 'opacity-0'\n }`}\n />\n <div\n ref={handlePanelRef}\n role=\"dialog\"\n // Only the topmost overlay may claim it, or a screen reader can still\n // browse the one underneath.\n aria-modal={isTopmost ? 'true' : undefined}\n tabIndex={-1}\n // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n aria-label={\n ariaLabelledBy\n ? undefined\n : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n }\n aria-labelledby={ariaLabelledBy}\n className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n style={{\n width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n // Inline: Tailwind translate utilities silently break inside\n // shadow roots (see CLAUDE.md Shadow DOM caveats).\n transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n }}\n >\n <div\n className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n headerDivider\n ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n : ''\n }`}\n >\n <div className=\"flex items-center gap-[12px]\">\n {onBack ? (\n <button\n type=\"button\"\n aria-label=\"Back\"\n onClick={onBack}\n className={OVERLAY_ICON_BUTTON_CLASSES}\n >\n <ArrowLeftIcon size={16} />\n </button>\n ) : null}\n {icon ? (\n <span className=\"flex shrink-0 items-center\">{icon}</span>\n ) : null}\n <div className=\"flex min-w-0 flex-1 items-center gap-[8px]\">\n <span className=\"shrink-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold text-[var(--malachite-text-primary)]\">\n {title}\n </span>\n {subtitle ? (\n <span className=\"min-w-0 truncate text-[13px] text-[var(--malachite-text-secondary)]\">\n {subtitle}\n </span>\n ) : null}\n {titleExtra ? (\n <span className=\"flex shrink-0 items-center\">{titleExtra}</span>\n ) : null}\n </div>\n {headerExtra ? (\n <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n ) : null}\n <button\n type=\"button\"\n aria-label=\"Close\"\n onClick={onClose}\n className={OVERLAY_ICON_BUTTON_CLASSES}\n >\n <DismissIcon size={10} />\n </button>\n </div>\n {description ? (\n <div className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n {description}\n </div>\n ) : null}\n </div>\n <div\n className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding ? 'px-[28px]' : ''}`}\n >\n {bodyPadding ? <div className=\"py-[28px]\">{children}</div> : children}\n </div>\n {footer ? (\n <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n {footer}\n </div>\n ) : null}\n </div>\n </div>\n </ShadowRootWrapper>,\n document.body,\n );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","titleExtra","description","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","children","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","DismissIcon"],"mappings":"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"}
1	+ {"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport EllipsisText from './Typography/EllipsisText';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n open: boolean;\n /** Dismiss handler — close button, ESC, or overlay click. /\n onClose: () => void;\n title: React.ReactNode;\n /* Secondary text, inline after the title. /\n subtitle?: React.ReactNode;\n /* Content at the end of the title row, after the subtitle (e.g. a status tag). /\n titleExtra?: React.ReactNode;\n /* Block paragraph below the title row, spanning the header width. /\n description?: React.ReactNode;\n /* Divider under the header. Default: false. /\n headerDivider?: boolean;\n /* Leading header slot, typically a logo or icon. /\n icon?: React.ReactNode;\n /* Content pinned right in the header, before the close button. /\n headerExtra?: React.ReactNode;\n footer?: React.ReactNode;\n /* Renders a back button before the header icon. /\n onBack?: () => void;\n /* Maximum panel width. Default: 1080. /\n maxWidth?: number \| string;\n /* Accessible dialog name; required when `title` isn't a plain string. /\n 'aria-label'?: string;\n /* ID of a visible element naming the dialog (alternative to `aria-label`). /\n 'aria-labelledby'?: string;\n /* Whether the body gets default padding. Default: true. /\n bodyPadding?: boolean;\n /* `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. /\n stacking?: 'default' \| 'above-app-overlays';\n children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number \| string): string =>\n typeof value === 'number' ? `${value}px` : value;\n\n/\n A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n open,\n onClose,\n title,\n subtitle,\n titleExtra,\n description,\n headerDivider = false,\n icon,\n headerExtra,\n footer,\n onBack,\n maxWidth = 1080,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n bodyPadding = true,\n stacking = 'default',\n children,\n}) => {\n const [isVisible, setIsVisible] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n const frameRef = useRef<number \| null>(null);\n const unmountTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const hostRef = useRef<HTMLDivElement \| null>(null);\n const {\n ref: handlePanelRef,\n isTopmost,\n zIndex,\n elevated,\n } = useOverlayBehaviour({\n open,\n onClose,\n elevated: stacking === 'above-app-overlays',\n hostRef,\n });\n\n useEffect(() => {\n if (open) {\n setIsMounted(true);\n if (unmountTimerRef.current) {\n clearTimeout(unmountTimerRef.current);\n unmountTimerRef.current = null;\n }\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n setIsVisible(true);\n });\n } else {\n setIsVisible(false);\n unmountTimerRef.current = setTimeout(() => {\n unmountTimerRef.current = null;\n setIsMounted(false);\n }, TRANSITION_MS);\n }\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n if (unmountTimerRef.current) {\n clearTimeout(unmountTimerRef.current);\n unmountTimerRef.current = null;\n }\n };\n }, [open]);\n\n if (!isMounted) {\n return null;\n }\n\n return createPortal(\n // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n // otherwise flatten our z-index and let sticky page elements paint over us.\n <ShadowRootWrapper\n hostRef={hostRef}\n hostStyle={{ position: 'relative', zIndex }}\n hostProps={\n elevated\n ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n : overlayIdentity('sidepanel')\n }\n >\n <div className=\"fixed inset-0 z-[1000]\">\n <div\n aria-hidden=\"true\"\n onClick={onClose}\n className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n isVisible ? 'opacity-100' : 'opacity-0'\n }`}\n />\n <div\n ref={handlePanelRef}\n role=\"dialog\"\n // Only the topmost overlay may claim it, or a screen reader can still\n // browse the one underneath.\n aria-modal={isTopmost ? 'true' : undefined}\n tabIndex={-1}\n // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n aria-label={\n ariaLabelledBy\n ? undefined\n : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n }\n aria-labelledby={ariaLabelledBy}\n className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n style={{\n width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n // Inline: Tailwind translate utilities silently break inside\n // shadow roots (see CLAUDE.md Shadow DOM caveats).\n transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n }}\n >\n <div\n className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n headerDivider\n ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n : ''\n }`}\n >\n <div className=\"flex items-center gap-[12px]\">\n {onBack ? (\n <button\n type=\"button\"\n aria-label=\"Back\"\n onClick={onBack}\n className={OVERLAY_ICON_BUTTON_CLASSES}\n >\n <ArrowLeftIcon size={16} />\n </button>\n ) : null}\n {icon ? (\n <span className=\"flex shrink-0 items-center\">{icon}</span>\n ) : null}\n <div className=\"flex min-w-0 flex-1 items-baseline gap-[12px]\">\n <div className=\"flex min-w-0 flex-1 items-baseline gap-[8px]\">\n <div className=\"flex min-w-0 items-baseline gap-[8px]\">\n <span className=\"flex min-w-0 max-w-full shrink-0\">\n <EllipsisText\n tooltip={title}\n tooltipWhenTruncated\n tooltipPlacement=\"bottom\"\n className=\"min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold\"\n >\n {title}\n </EllipsisText>\n </span>\n {subtitle ? (\n <EllipsisText\n tooltip={subtitle}\n tooltipWhenTruncated\n tooltipPlacement=\"bottom\"\n color=\"secondary\"\n className=\"min-w-0 text-[13px]\"\n >\n {subtitle}\n </EllipsisText>\n ) : null}\n </div>\n {titleExtra ? (\n <span className=\"flex shrink-0 items-center\">\n {titleExtra}\n </span>\n ) : null}\n </div>\n {headerExtra ? (\n <span className=\"flex shrink-0 items-baseline\">\n {headerExtra}\n </span>\n ) : null}\n </div>\n <button\n type=\"button\"\n aria-label=\"Close\"\n onClick={onClose}\n className={OVERLAY_ICON_BUTTON_CLASSES}\n >\n <DismissIcon size={10} />\n </button>\n </div>\n {description ? (\n <div className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n {description}\n </div>\n ) : null}\n </div>\n <div\n className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding ? 'px-[28px]' : ''}`}\n >\n {bodyPadding ? <div className=\"py-[28px]\">{children}</div> : children}\n </div>\n {footer ? (\n <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n {footer}\n </div>\n ) : null}\n </div>\n </div>\n </ShadowRootWrapper>,\n document.body,\n );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","titleExtra","description","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","children","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","EllipsisText","DismissIcon"],"mappings":"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"}

package/dist/components/TextArea/TextArea.js CHANGED Viewed

@@ -185,7 +185,7 @@ const ze = (t) => {
     "div",
     {
       id: k,
-      className: "text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
+      className: "mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
       children: N
     }
   ) : null, de = (r) => /* @__PURE__ */ a(je, { id: J, message: r, spaced: !0 });