@mieweb/ui 0.10.0-dev.33 → 0.10.0-dev.35

package/dist/index.d.cts

@@ -4521,19 +4521,33 @@ declare const AvatarGroup: React$1.ForwardRefExoticComponent<AvatarGroupProps &
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "danger" | "warning" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    removable?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, Omit<VariantProps<typeof badgeVariants>, 'removable'> {
     /** Optional icon before the text */
     icon?: React$1.ReactNode;
+    /** Renders a remove button after the text; the badge becomes a chip. */
+    onRemove?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible name of the remove button. Always pass a translated string;
+     * the English default only guards against a missing label.
+     */
+    removeLabel?: string;
+    /** Disables the remove button. */
+    removeDisabled?: boolean;
 }
 /**
  * A badge component for displaying status, labels, or counts.
+ * With `onRemove` it becomes a removable chip.
  *
  * @example
  * ```tsx
  * <Badge variant="success">Active</Badge>
  * <Badge variant="warning" size="sm">Pending</Badge>
  * <Badge variant="danger" icon={<AlertIcon />}>Error</Badge>
+ * <Badge onRemove={() => clear(tag)} removeLabel={t('removeTag', { tag })}>
+ *   {tag}
+ * </Badge>
  * ```
  */
 declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -13355,12 +13369,18 @@ interface ProgressProps extends VariantProps<typeof progressBarTrackVariants>, V
     max?: number;
     /** Label for the progress bar */
     label?: string;
+    /** Accessible name when no visible `label` is rendered. */
+    srLabel?: string;
+    /** Human-readable `aria-valuetext` announced instead of the raw value. */
+    valueText?: string;
     /** Show the percentage value */
     showValue?: boolean;
     /** Format the displayed value */
     formatValue?: (value: number, max: number) => string;
     /** Additional class name */
     className?: string;
+    /** Class for the fill, e.g. to tone its colour by value. */
+    fillClassName?: string;
     /** Whether the progress is indeterminate */
     indeterminate?: boolean;
 }
@@ -13374,7 +13394,7 @@ interface ProgressProps extends VariantProps<typeof progressBarTrackVariants>, V
  * <Progress value={30} variant="success" striped />
  * ```
  */
-declare function Progress({ value, max, label, showValue, formatValue, size, variant, animated, striped, className, indeterminate, }: ProgressProps): react_jsx_runtime.JSX.Element;
+declare function Progress({ value, max, label, srLabel, valueText, showValue, formatValue, size, variant, animated, striped, className, fillClassName, indeterminate, }: ProgressProps): react_jsx_runtime.JSX.Element;
 declare namespace Progress {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -4521,19 +4521,33 @@ declare const AvatarGroup: React$1.ForwardRefExoticComponent<AvatarGroupProps &
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "danger" | "warning" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    removable?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, Omit<VariantProps<typeof badgeVariants>, 'removable'> {
     /** Optional icon before the text */
     icon?: React$1.ReactNode;
+    /** Renders a remove button after the text; the badge becomes a chip. */
+    onRemove?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible name of the remove button. Always pass a translated string;
+     * the English default only guards against a missing label.
+     */
+    removeLabel?: string;
+    /** Disables the remove button. */
+    removeDisabled?: boolean;
 }
 /**
  * A badge component for displaying status, labels, or counts.
+ * With `onRemove` it becomes a removable chip.
  *
  * @example
  * ```tsx
  * <Badge variant="success">Active</Badge>
  * <Badge variant="warning" size="sm">Pending</Badge>
  * <Badge variant="danger" icon={<AlertIcon />}>Error</Badge>
+ * <Badge onRemove={() => clear(tag)} removeLabel={t('removeTag', { tag })}>
+ *   {tag}
+ * </Badge>
  * ```
  */
 declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -13355,12 +13369,18 @@ interface ProgressProps extends VariantProps<typeof progressBarTrackVariants>, V
     max?: number;
     /** Label for the progress bar */
     label?: string;
+    /** Accessible name when no visible `label` is rendered. */
+    srLabel?: string;
+    /** Human-readable `aria-valuetext` announced instead of the raw value. */
+    valueText?: string;
     /** Show the percentage value */
     showValue?: boolean;
     /** Format the displayed value */
     formatValue?: (value: number, max: number) => string;
     /** Additional class name */
     className?: string;
+    /** Class for the fill, e.g. to tone its colour by value. */
+    fillClassName?: string;
     /** Whether the progress is indeterminate */
     indeterminate?: boolean;
 }
@@ -13374,7 +13394,7 @@ interface ProgressProps extends VariantProps<typeof progressBarTrackVariants>, V
  * <Progress value={30} variant="success" striped />
  * ```
  */
-declare function Progress({ value, max, label, showValue, formatValue, size, variant, animated, striped, className, indeterminate, }: ProgressProps): react_jsx_runtime.JSX.Element;
+declare function Progress({ value, max, label, srLabel, valueText, showValue, formatValue, size, variant, animated, striped, className, fillClassName, indeterminate, }: ProgressProps): react_jsx_runtime.JSX.Element;
 declare namespace Progress {
     var displayName: string;
 }

package/dist/index.js

@@ -1,8 +1,8 @@
 import { getModelBytes } from './chunk-6I7IDZ4A.js';
 import { loadWhatPrints, saveWhatPrints, clearWhatPrints } from './chunk-74ENCTIK.js';
 export { clearVoiceprints, clearWhatPrints, getVoiceprints, loadWhatPrints, saveWhatPrints, setVoiceprints } from './chunk-74ENCTIK.js';
-export { RecordLayout, defaultRecordLayoutLabels } from './chunk-H3QPREIJ.js';
-export { TagEditor, defaultTagEditorLabels } from './chunk-VNEAQCY2.js';
+export { RecordLayout, defaultRecordLayoutLabels } from './chunk-X3RSNAMX.js';
+export { TagEditor, defaultTagEditorLabels } from './chunk-DGHS5IVD.js';
 export { UserPicker, defaultUserPickerLabels } from './chunk-SZSRGUVO.js';
 export { brands } from './chunk-RPFATYUI.js';
 export { miewebBrand } from './chunk-NERS5ZT6.js';
@@ -14,21 +14,21 @@ export { createBrandPreset, generateBrandCSS, generateTailwindTheme } from './ch
 export { bluehiveBrand } from './chunk-PJEL5ZZV.js';
 export { ccmeBrand } from './chunk-SCQRJPSV.js';
 export { ozwellBrand } from './chunk-5YUBQIC7.js';
-export { CompletenessMeter, defaultCompletenessMeterLabels, getCompleteness } from './chunk-6JSFT2J5.js';
+export { CompletenessMeter, defaultCompletenessMeterLabels, getCompleteness } from './chunk-RLVYWUXG.js';
 export { FieldHistory, defaultFieldHistoryLabels } from './chunk-6N7NMOSV.js';
 export { LogoUploader, defaultLogoUploaderLabels } from './chunk-WQHBMZSC.js';
 export { PhiMask, defaultPhiMaskLabels } from './chunk-DHGCLPFZ.js';
 export { PropertyList, defaultPropertyListLabels } from './chunk-7HUTR6RX.js';
 export { InlineEdit, defaultInlineEditLabels } from './chunk-M3VPGJMV.js';
 export { Rating, ReviewCard, defaultRatingLabels, defaultReviewCardLabels } from './chunk-CBBKWRLG.js';
-export { RecordHeader, defaultRecordHeaderLabels } from './chunk-EPTP3VKT.js';
-export { PlayButton, VideoCard } from './chunk-TPWKM7JH.js';
+export { RecordHeader, defaultRecordHeaderLabels } from './chunk-WFL4N5PC.js';
+export { PlayButton, VideoCard } from './chunk-43K7OQ3E.js';
 export { VisuallyHidden } from './chunk-H2CIKJQI.js';
 export { MONTH_LETTERS, MONTH_NAMES, YearTimeline, resolveCurrent } from './chunk-SQJFBZ42.js';
-export { ActionPlan, defaultActionPlanLabels } from './chunk-FKGFOBC2.js';
+export { ActionPlan, defaultActionPlanLabels } from './chunk-434L5RYF.js';
 export { ActivityFeed, defaultActivityFeedLabels } from './chunk-X5JOEZVR.js';
 import './chunk-YGS2TRMP.js';
-export { AssociationList, defaultAssociationListLabels } from './chunk-LRRSD7LR.js';
+export { AssociationList, defaultAssociationListLabels } from './chunk-5HKZR6UG.js';
 import './chunk-FTEZNCRI.js';
 import './chunk-Y424YL55.js';
 import './chunk-GY5SP4ST.js';
@@ -58,8 +58,8 @@ export { SectionSpyNav } from './chunk-FIKO4WR6.js';
 export { AnimatedNumber, SliderCalculator } from './chunk-NUB5HRKS.js';
 import { Skeleton } from './chunk-ZIUADGAR.js';
 export { Skeleton, SkeletonCard, SkeletonTable, SkeletonText, skeletonVariants } from './chunk-ZIUADGAR.js';
-import { Progress } from './chunk-CEQJGUAS.js';
-export { CircularProgress, Progress, circularProgressVariants, progressBarFillVariants, progressBarTrackVariants } from './chunk-CEQJGUAS.js';
+import { Progress } from './chunk-P4E3K3ND.js';
+export { CircularProgress, Progress, circularProgressVariants, progressBarFillVariants, progressBarTrackVariants } from './chunk-P4E3K3ND.js';
 export { QuickAction, QuickActionGroup, QuickActionIcons, quickActionIconVariants, quickActionVariants } from './chunk-TQDZLRIE.js';
 export { ReadingProgressBar } from './chunk-WKSUL2ZN.js';
 import { RecordButton } from './chunk-VNWJTCBQ.js';
@@ -72,7 +72,7 @@ import './chunk-RISZWWEQ.js';
 import { normalizePath, MegaMenuBar } from './chunk-THLIL6PY.js';
 export { MegaMenu, MegaMenuBar, normalizePath } from './chunk-THLIL6PY.js';
 export { OrbitRing } from './chunk-SUS3WFY3.js';
-export { RadialExplorer } from './chunk-3RXZWHCU.js';
+export { RadialExplorer } from './chunk-LDBNUJB7.js';
 export { Pagination, SimplePagination, paginationButtonVariants } from './chunk-PFKRHNYV.js';
 export { PhoneInput, PhoneInputGroup } from './chunk-XOIIUO6O.js';
 export { GanttView, defaultGanttLabels } from './chunk-Y4QNLW7W.js';
@@ -118,7 +118,7 @@ export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime as formatAudi
 export { AudioRecorder, audioRecorderVariants, controlButtonVariants, formatTime, waveformContainerVariants } from './chunk-2DW4PUJD.js';
 export { Autocomplete } from './chunk-UBOVDAD7.js';
 export { BoardView, cardVariants as boardViewCardVariants, defaultBoardLabels } from './chunk-XVW5DPPP.js';
-export { BenchmarkTableSection, ComparisonSection, CtaSection, FaqSection, FeatureGridSection, HeroSection, LandingPage, LeadFormSection, LinkGroupsSection, LogoCloudSection, MetricListSection, PdfEmbedSection, PricingSection, ProcessStepsSection, RankedListSection, ReportByline, ReportLegend, ReportMethodology, ResourceCardsSection, SplitContentSection, StatsSection, TestimonialSection, TileCartogramSection, VideoSection, defaultLeadFormFields, landingPresets, quartileBuckets, usStateTiles, validateLandingPage } from './chunk-T4JYUICS.js';
+export { BenchmarkTableSection, ComparisonSection, CtaSection, FaqSection, FeatureGridSection, HeroSection, LandingPage, LeadFormSection, LinkGroupsSection, LogoCloudSection, MetricListSection, PdfEmbedSection, PricingSection, ProcessStepsSection, RankedListSection, ReportByline, ReportLegend, ReportMethodology, ResourceCardsSection, SplitContentSection, StatsSection, TestimonialSection, TileCartogramSection, VideoSection, defaultLeadFormFields, landingPresets, quartileBuckets, usStateTiles, validateLandingPage } from './chunk-Y7ZJZLJY.js';
 import './chunk-IQ4KQJAO.js';
 export { MetricStatusBadge, SectionHeading, SectionShell, TemplateIcon, defaultMetricStatusLabels, templateIcons } from './chunk-FBCDYTWM.js';
 import { useDirection, useCommandK, useIsMobile, useMediaQuery } from './chunk-F3EWRDIT.js';
@@ -136,7 +136,7 @@ export { useMediaTransport } from './chunk-GW4RFJZ5.js';
 import './chunk-7XUN3OQT.js';
 export { isHtmlEmpty, stripHtmlTags } from './chunk-ERLPVXOV.js';
 export { formatPhoneNumber, isPhoneNumberEmpty, isValidPhoneNumber, unformatPhoneNumber } from './chunk-ZVPJ2MH6.js';
-export { miewebUIPreset, miewebUISafelist } from './chunk-TKWNXAFI.js';
+export { miewebUIPreset, miewebUISafelist } from './chunk-FDA3R5E7.js';
 export { Accordion } from './chunk-JUJGWUAN.js';
 import './chunk-H2Y7HZV5.js';
 export { AvatarGroup, defaultAvatarGroupLabels } from './chunk-DVDT7TX7.js';
@@ -147,8 +147,8 @@ import { Spinner, SpinnerWithLabel } from './chunk-UA7E7PDS.js';
 export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants } from './chunk-UA7E7PDS.js';
 import { evaluateDue, completedKeys, normalizeOrders } from './chunk-Y5KEFV5O.js';
 export { buildChartOrderRows, buildEncounterOrderRows, dueForOrder, evaluateDue, evaluateProgram, isApplicable } from './chunk-Y5KEFV5O.js';
-import { useCodeLookupConfig, RowActionToolbar, RowIconButton, toolbarKeyNav, parseSig, labelToMedicationFields, MedicationEditor } from './chunk-YMILRSRO.js';
-export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig } from './chunk-YMILRSRO.js';
+import { useCodeLookupConfig, RowActionToolbar, RowIconButton, toolbarKeyNav, parseSig, labelToMedicationFields, MedicationEditor } from './chunk-MHR2OS5I.js';
+export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig } from './chunk-MHR2OS5I.js';
 import { Textarea } from './chunk-H3YO5GBM.js';
 export { Textarea, textareaVariants } from './chunk-H3YO5GBM.js';
 import { Tooltip } from './chunk-7X6R3JIA.js';
@@ -188,8 +188,8 @@ import { Plus, GripVertical, RefreshCw, Pencil, Trash2, AlertCircle, ArrowLeft,
 export { Accessibility as AccessibilityIcon, Activity as ActivityIcon, AlertCircle as AlertCircleIcon, AlertTriangle as AlertTriangleIcon, Wheat as AllergyIcon, WheatOff as AllergyOffIcon, Ambulance as AmbulanceIcon, ArrowLeft as ArrowLeftIcon, ArrowRight as ArrowRightIcon, ArrowUpDown as ArrowUpDownIcon, ArrowUp as ArrowUpIcon, AtSign as AtSignIcon, Baby as BabyIcon, BadgeAlert as BadgeAlertIcon, BadgeCheck as BadgeCheckIcon, BadgeMinus as BadgeMinusIcon, BadgePlus as BadgePlusIcon, BadgeX as BadgeXIcon, Ban as BanIcon, Bandage as BandageIcon, BedDouble as BedDoubleIcon, Bed as BedIcon, BedSingle as BedSingleIcon, Bell as BellIcon, BellOff as BellOffIcon, Biohazard as BiohazardIcon, Bone as BoneIcon, BookOpenCheck as BookOpenCheckIcon, BookOpen as BookOpenIcon, Bookmark as BookmarkIcon, Bot as BotIcon, Brain as BrainIcon, Briefcase as BriefcaseIcon, BriefcaseMedical as BriefcaseMedicalIcon, Building as BuildingIcon, CalendarCheck as CalendarCheckIcon, Calendar as CalendarIcon, Camera as CameraIcon, Cannabis as CannabisIcon, BarChart3 as ChartIcon, CheckCircle as CheckCircleIcon, Check as CheckIcon, ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, Cigarette as CigaretteIcon, CigaretteOff as CigaretteOffIcon, CircleDotDashed as CircleDotDashedIcon, CircleDot as CircleDotIcon, CircleUser as CircleUserIcon, ClipboardCheck as ClipboardCheckIcon, Clipboard as ClipboardIcon, ClipboardList as ClipboardListIcon, ClipboardPlus as ClipboardPlusIcon, Clock as ClockIcon, Cog as CogIcon, Columns as ColumnsIcon, Copy as CopyIcon, CreditCard as CreditCardIcon, Cross as CrossIcon, Dna as DnaIcon, DollarSign as DollarSignIcon, Download as DownloadIcon, Droplet as DropletIcon, Droplets as DropletsIcon, Ear as EarIcon, ExternalLink as ExternalLinkIcon, Eye as EyeIcon, EyeOff as EyeOffIcon, FileCheck2 as FileCheck2Icon, FileCheck as FileCheckIcon, FileHeart as FileHeartIcon, File as FileIcon, FilePlus2 as FilePlus2Icon, FilePlus as FilePlusIcon, FileText as FileTextIcon, Filter as FilterIcon, Fingerprint as FingerprintIcon, Flag as FlagIcon, FlaskConical as FlaskIcon, FlaskRound as FlaskRoundIcon, Folder as FolderIcon, FolderOpen as FolderOpenIcon, Footprints as FootprintsIcon, Glasses as GlassesIcon, Globe as GlobeIcon, LayoutGrid as GridIcon, GripVertical as GripVerticalIcon, Hand as HandIcon, HandMetal as HandMetalIcon, Hash as HashIcon, Heart as HeartIcon, HeartOff as HeartOffIcon, HeartPulse as HeartPulseIcon, HelpCircle as HelpCircleIcon, History as HistoryIcon, Home as HomeIcon, Hospital as HospitalIcon, Image as ImageIcon, Info as InfoIcon, Key as KeyIcon, Link as LinkIcon, List as ListIcon, Loader2 as LoaderIcon, Lock as LockIcon, LogIn as LogInIcon, LogOut as LogOutIcon, Mail as MailIcon, MapPin as MapPinIcon, Maximize as MaximizeIcon, Menu as MenuIcon, MessageSquare as MessageIcon, Mic as MicIcon, Microscope as MicroscopeIcon, Minimize as MinimizeIcon, Minus as MinusIcon, Monitor as MonitorIcon, Moon as MoonIcon, MoreHorizontal as MoreHorizontalIcon, MoreVertical as MoreVerticalIcon, NotebookPen as NotebookPenIcon, Palette as PaletteIcon, Paperclip as PaperclipIcon, CircleUserRound as PatientIcon, Pencil as PencilIcon, UserRound as PersonIcon, Phone as PhoneIcon, PieChart as PieChartIcon, Pill as PillIcon, Plus as PlusIcon, Printer as PrinterIcon, Radiation as RadiationIcon, Ruler as RulerIcon, Save as SaveIcon, Scale as ScaleIcon, Scaling as ScalingIcon, ScanEye as ScanEyeIcon, Scan as ScanIcon, ScanLine as ScanLineIcon, Search as SearchIcon, Settings as SettingsIcon, Share as ShareIcon, ShieldCheck as ShieldCheckIcon, Shield as ShieldIcon, ShieldPlus as ShieldPlusIcon, Sliders as SlidersIcon, Sparkle as SparkleIcon, Star as StarIcon, Stethoscope as StethoscopeIcon, StickyNote as StickyNoteIcon, Square as StopIcon, Sun as SunIcon, Syringe as SyringeIcon, Table as TableIcon, Tablets as TabletsIcon, Tag as TagIcon, TestTube2 as TestTubeIcon, TestTubes as TestTubesIcon, Thermometer as ThermometerIcon, ThermometerSun as ThermometerSunIcon, ThumbsDown as ThumbsDownIcon, ThumbsUp as ThumbsUpIcon, Timer as TimerIcon, Trash2 as TrashIcon, TrendingDown as TrendingDownIcon, TrendingUp as TrendingUpIcon, Truck as TruckIcon, Unlock as UnlockIcon, Upload as UploadIcon, UserCheck as UserCheckIcon, User as UserIcon, UserMinus as UserMinusIcon, UserPlus as UserPlusIcon, UserRoundCheck as UserRoundCheckIcon, UserRoundMinus as UserRoundMinusIcon, UserRoundPlus as UserRoundPlusIcon, UserRoundX as UserRoundXIcon, Users as UsersIcon, Weight as WeightIcon, Wrench as WrenchIcon, XCircle as XCircleIcon, X2 as XIcon, Zap as ZapIcon } from './chunk-BKSPDTX4.js';
 import { usePrefersReducedMotion } from './chunk-XDU65GLW.js';
 export { usePrefersReducedMotion } from './chunk-XDU65GLW.js';
-import { Badge } from './chunk-BMSG4NBH.js';
-export { Badge, badgeVariants } from './chunk-BMSG4NBH.js';
+import { Badge } from './chunk-522WJIVI.js';
+export { Badge, badgeVariants } from './chunk-522WJIVI.js';
 import './chunk-N5JDL4VE.js';
 import { Button } from './chunk-WFBUBT54.js';
 export { Button } from './chunk-WFBUBT54.js';
@@ -34563,27 +34563,13 @@ function ActiveFilters({
       "data-slot": "provider-active-filters",
       children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Active filters:" }),
-        activeFilters.map((filter) => /* @__PURE__ */ jsxs(
-          "span",
+        activeFilters.map((filter) => /* @__PURE__ */ jsx(
+          Badge,
           {
-            className: cn(
-              "inline-flex items-center gap-1 rounded-full px-2 py-1 text-sm",
-              "bg-neutral-100 text-neutral-700",
-              "dark:bg-neutral-700 dark:text-neutral-300"
-            ),
-            children: [
-              filter.label,
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: filter.onClear,
-                  className: "ms-1 rounded-full p-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-600",
-                  "aria-label": `Remove filter: ${filter.label}`,
-                  children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-3 w-3" })
-                }
-              )
-            ]
+            variant: "secondary",
+            onRemove: filter.onClear,
+            removeLabel: `Remove filter: ${filter.label}`,
+            children: filter.label
           },
           filter.key
         )),