@flamingo-stack/openframe-frontend-core 0.0.712 → 0.0.713

package/dist/index.js

@@ -33,7 +33,7 @@ import {
   isMegaMenu,
   navLinkLabel,
   siteNavHasMobileMenus
-} from "./chunk-EFNKS5W4.js";
+} from "./chunk-KPUHSVJU.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
@@ -49,6 +49,8 @@ import {
   AIRequiredBadge,
   AIStatusIndicator,
   AIWarningsSection,
+  APPROVAL_LEVELS,
+  APPROVAL_LEVEL_META,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -83,6 +85,8 @@ import {
   AppLayoutDrawerTrigger,
   AppStoreBadge,
   AppWindowFrame,
+  ApprovalLevelControl,
+  ApprovalLevelMark,
   ApprovalRequestNotificationTile,
   ArrayEntryManager,
   ArticleDetailLayout,
@@ -561,7 +565,7 @@ import {
   useTrackerClock,
   useWalkthroughVideo,
   usersCountLabel
-} from "./chunk-FCAVAEHF.js";
+} from "./chunk-STPC2AQU.js";
 import {
   Board,
   BoardColumn,
@@ -2084,6 +2088,8 @@ export {
   ANNOUNCEMENT_CTA_DEFAULTS,
   ANTHROPIC_SUPPORTED_IMAGE_MIME,
   APPROVAL_BLOCK_VARIANT,
+  APPROVAL_LEVELS,
+  APPROVAL_LEVEL_META,
   APPROVAL_STATUS,
   ASK_AI_OPEN_EVENT,
   ASSISTANT_TYPE,
@@ -2139,6 +2145,8 @@ export {
   AppWindowFrame,
   AppleIcon,
   ApprovalBatchMessage,
+  ApprovalLevelControl,
+  ApprovalLevelMark,
   ApprovalRequestMessage,
   ApprovalRequestNotificationTile,
   ApprovalStatusTag,

package/dist/{knowledge-KTCVJIWN.cjs → knowledge-7PDZLXPO.cjs}

@@ -8,7 +8,7 @@ var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
 var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
-var _chunkL6ZQGWCXcjs = require('./chunk-L6ZQGWCX.cjs');
+var _chunkOQKRXLTZcjs = require('./chunk-OQKRXLTZ.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -96,7 +96,7 @@ function KnowledgeScreen(_props) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkL6ZQGWCXcjs.KnowledgeBaseArticleView,
+    _chunkOQKRXLTZcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
       content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHETQETPVcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })

package/dist/{knowledge-H5BIWJVI.js → knowledge-Q4SPFOTN.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-CYUUHFXL.js";
 import {
   KnowledgeBaseArticleView
-} from "./chunk-FCAVAEHF.js";
+} from "./chunk-STPC2AQU.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{logs-DB5Z7M5Q.js → logs-SZ4VB4FE.js}

@@ -16,7 +16,7 @@ import {
   ToolBadge,
   logSeverityVariant,
   logSourceLabels
-} from "./chunk-FCAVAEHF.js";
+} from "./chunk-STPC2AQU.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{logs-RVCC2UQW.cjs → logs-TO3NELGJ.cjs}

@@ -16,7 +16,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkL6ZQGWCXcjs = require('./chunk-L6ZQGWCX.cjs');
+var _chunkOQKRXLTZcjs = require('./chunk-OQKRXLTZ.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -77,7 +77,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkKHXZFLINcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkL6ZQGWCXcjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkOQKRXLTZcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -149,13 +149,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL6ZQGWCXcjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOQKRXLTZcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkL6ZQGWCXcjs.LogsPageView,
+      _chunkOQKRXLTZcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -163,7 +163,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkL6ZQGWCXcjs.LogsTableView,
+          _chunkOQKRXLTZcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -177,8 +177,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL6ZQGWCXcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkL6ZQGWCXcjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOQKRXLTZcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkOQKRXLTZcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -190,12 +190,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL6ZQGWCXcjs.ToolBadge, { toolType: _chunkHETQETPVcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOQKRXLTZcjs.ToolBadge, { toolType: _chunkHETQETPVcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkL6ZQGWCXcjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkOQKRXLTZcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkL6ZQGWCXcjs.DeviceCard,
+          _chunkOQKRXLTZcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-HV4IQCBV.cjs → policies-533GQVFM.cjs}

@@ -10,7 +10,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkL6ZQGWCXcjs = require('./chunk-L6ZQGWCX.cjs');
+var _chunkOQKRXLTZcjs = require('./chunk-OQKRXLTZ.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -82,14 +82,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkL6ZQGWCXcjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkOQKRXLTZcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkL6ZQGWCXcjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkOQKRXLTZcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -103,16 +103,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkL6ZQGWCXcjs.PoliciesTable,
+    _chunkOQKRXLTZcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL6ZQGWCXcjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOQKRXLTZcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL6ZQGWCXcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOQKRXLTZcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{policies-EWUULFBR.js → policies-LB7VW2UB.js}

@@ -10,7 +10,7 @@ import {
   PolicySummaryCards,
   computePolicySummary,
   getPolicyTableStatus
-} from "./chunk-FCAVAEHF.js";
+} from "./chunk-STPC2AQU.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{software-update-D4OVSWSG.cjs → software-update-DT2XSG7M.cjs}

@@ -16,7 +16,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkL6ZQGWCXcjs = require('./chunk-L6ZQGWCX.cjs');
+var _chunkOQKRXLTZcjs = require('./chunk-OQKRXLTZ.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -114,14 +114,14 @@ var noop = () => {
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkL6ZQGWCXcjs.Autocomplete,
+    _chunkOQKRXLTZcjs.Autocomplete,
     {
-      label: _chunkL6ZQGWCXcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkOQKRXLTZcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkL6ZQGWCXcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkOQKRXLTZcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -135,7 +135,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkL6ZQGWCXcjs.SoftwareActionForm,
+    _chunkOQKRXLTZcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -147,7 +147,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkL6ZQGWCXcjs.DeviceSelector,
+        _chunkOQKRXLTZcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/dist/{software-update-6PXKRKBT.js → software-update-ENZNVGKP.js}

@@ -16,7 +16,7 @@ import {
   PACKAGE_SEARCH_LABEL,
   PACKAGE_SEARCH_PLACEHOLDER,
   SoftwareActionForm
-} from "./chunk-FCAVAEHF.js";
+} from "./chunk-STPC2AQU.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.712",
+  "version": "0.0.713",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/approval-level.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import type { ComponentType } from 'react';
+import type { ApprovalLevel } from '../../types/permissions';
+import { cn } from '../../utils/cn';
+import { HeadsetIcon } from '../icons-v2-generated/audio-and-visual/headset-icon';
+import { BannedIcon } from '../icons-v2-generated/security/banned-icon';
+import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
+import { UserIcon } from '../icons-v2-generated/users/user-icon';
+import { ToggleGroup, ToggleGroupItem } from '../toggle-group';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import { TouchFriendlyTooltip } from '../ui/touch-friendly-tooltip';
+
+/** The approval levels, in the order a choice reads: from "runs on its own" to "never runs". */
+export const APPROVAL_LEVELS: readonly ApprovalLevel[] = ['ALLOW', 'ASK_USER', 'ASK_TECHNICIAN', 'DENY'];
+
+export interface ApprovalLevelMeta {
+  /** The level's name, as every surface writes it. */
+  label: string;
+  /** What the level means, in one line: the tooltip of its icon. */
+  hint: string;
+  Icon: ComponentType<{ size?: number; className?: string }>;
+  /** The level's colour when it is the one in force (semantic status tokens). */
+  toneClassName: string;
+}
+
+/**
+ * THE look and wording of an approval level: its name, its one-line meaning,
+ * its icon and its colour. The guardrails panel's dropdown, the icon control
+ * below and any read-only mark read it, so a level is the same everywhere.
+ */
+export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
+  ALLOW: {
+    label: 'Allow',
+    hint: 'Runs on its own. You get a summary after.',
+    Icon: CheckCircleIcon,
+    toneClassName: 'text-ods-success',
+  },
+  ASK_USER: {
+    label: 'Ask User',
+    hint: 'Asks the person at the computer first.',
+    Icon: UserIcon,
+    toneClassName: 'text-ods-warning',
+  },
+  ASK_TECHNICIAN: {
+    label: 'Ask Technician',
+    hint: 'Asks a technician first. Nothing runs until they approve.',
+    Icon: HeadsetIcon,
+    toneClassName: 'text-ods-warning',
+  },
+  DENY: { label: 'Restrict', hint: 'Never runs.', Icon: BannedIcon, toneClassName: 'text-ods-error' },
+};
+
+const ICON_PX = 16;
+
+export interface ApprovalLevelMarkProps {
+  level: ApprovalLevel;
+  /** Icon only: the name is the mark's accessible name and its tooltip. Default false (icon and name). */
+  iconOnly?: boolean;
+  className?: string;
+}
+
+/** One level, read-only: its icon in its colour, with its name beside it or as its tooltip. */
+export function ApprovalLevelMark({ level, iconOnly = false, className }: ApprovalLevelMarkProps) {
+  const { label, hint, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
+  const mark = (
+    <span className={cn('inline-flex items-center gap-[var(--spacing-system-xxs)] text-h6', toneClassName, className)}>
+      <Icon size={ICON_PX} className="shrink-0" aria-hidden />
+      {iconOnly ? <span className="sr-only">{label}</span> : label}
+    </span>
+  );
+  return iconOnly ? (
+    <TouchFriendlyTooltip content={`${label}: ${hint}`} side="top">
+      {mark}
+    </TouchFriendlyTooltip>
+  ) : (
+    mark
+  );
+}
+
+export interface ApprovalLevelControlProps {
+  value: ApprovalLevel;
+  onChange: (level: ApprovalLevel) => void;
+  /** The id of the element that names what is being decided (the rule's label). */
+  'aria-labelledby'?: string;
+  /** The level in force, written beside the icons. Default true: a row reads without hovering, and on touch. */
+  showLabel?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * A choice of approval level as four icons, one per level, in a single-choice
+ * group (arrow keys move, like every toggle group). Each icon has the level's
+ * name as its accessible name and a tooltip with what the level means (hover
+ * or keyboard focus; a tap selects). The level in force wears its colour, and its name
+ * is written beside the group, so the choice never depends on a tooltip.
+ */
+export function ApprovalLevelControl({
+  value,
+  onChange,
+  'aria-labelledby': labelledBy,
+  showLabel = true,
+  disabled = false,
+  className,
+}: ApprovalLevelControlProps) {
+  const current = APPROVAL_LEVEL_META[value];
+  return (
+    <div className={cn('flex shrink-0 items-center gap-[var(--spacing-system-sf)]', className)}>
+      {showLabel && <span className={cn('whitespace-nowrap text-h6', current.toneClassName)}>{current.label}</span>}
+      <TooltipProvider delayDuration={150}>
+        <ToggleGroup
+          type="single"
+          variant="outline"
+          size="sm"
+          value={value}
+          disabled={disabled}
+          // Clicking the level in force reports '' (deselect): a rule always has a level.
+          onValueChange={(next: string) => {
+            if (next && next !== value) onChange(next as ApprovalLevel);
+          }}
+          aria-labelledby={labelledBy}
+        >
+          {APPROVAL_LEVELS.map(level => {
+            const { label, hint, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
+            return (
+              // A plain tooltip (hover and keyboard focus): a tap must SELECT the level, and on
+              // touch the name beside the group says what is in force.
+              <Tooltip key={level}>
+                <TooltipTrigger asChild>
+                  <ToggleGroupItem
+                    value={level}
+                    aria-label={label}
+                    className={cn('px-2', level === value && toneClassName)}
+                  >
+                    <Icon size={ICON_PX} aria-hidden />
+                  </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-xs">
+                  <b>{label}</b>: {hint}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </ToggleGroup>
+      </TooltipProvider>
+    </div>
+  );
+}

package/src/components/features/index.ts

@@ -87,6 +87,7 @@ export * from './highlight-video-combined-section';
 export * from './view-toggle';
 // AI Enrich components
 export * from './ai-enrich';
+export * from './approval-level';
 export * from './policy-configuration-panel';
 export * from './policies';
 export * from './cloud-tenants';

package/src/components/features/policy-configuration-panel.tsx

@@ -14,23 +14,14 @@ import { useCollapsible } from '../chat/hooks/use-collapsible';
 import { ToolIcon } from '../tool-icon';
 import { Button } from '../ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from './approval-level';
 
-const approvalLevelLabels: Record<ApprovalLevel, string> = {
-  ALLOW: 'Allow',
-  ASK_USER: 'Ask User',
-  ASK_TECHNICIAN: 'Ask Technician',
-  DENY: 'Restrict',
-};
-
-const approvalLevelOptions = (Object.keys(approvalLevelLabels) as ApprovalLevel[]).map(value => ({
-  value,
-  label: approvalLevelLabels[value],
-}));
+const approvalLevelOptions = APPROVAL_LEVELS.map(value => ({ value, label: APPROVAL_LEVEL_META[value].label }));
 
 const POLICY_LEVEL_WIDTH = 'w-[180px]';
 const CATEGORY_LEVEL_WIDTH = 'w-[256px]';
 
-const getApprovalLevelLabel = (level: ApprovalLevel): string => approvalLevelLabels[level] ?? level;
+const getApprovalLevelLabel = (level: ApprovalLevel): string => APPROVAL_LEVEL_META[level]?.label ?? level;
 
 const ApprovalLevelDropdown: FC<{
   value: ApprovalLevel | undefined;