@osdk/cbac-components 0.1.0-beta.3 → 0.1.0

package/build/cjs/public/experimental.cjs

@@ -1,5 +1,339 @@
 'use strict';
 
+var React5 = require('react');
+var classnames = require('classnames');
+var button = require('@base-ui/react/button');
+var icons = require('@blueprintjs/icons');
+var popover = require('@base-ui/react/popover');
+var admin = require('@osdk/react/experimental/admin');
+var primitives = require('@osdk/react-components/primitives');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React5__default = /*#__PURE__*/_interopDefault(React5);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+// src/cbac-picker/CbacPicker.tsx
+
+// src/cbac-picker/utils/cbacPickerUtils.ts
+var EMPTY_ARRAY = [];
+function backgroundFromColors(backgroundColors) {
+  return backgroundColors.length > 1 ? `linear-gradient(to right, ${backgroundColors.join(", ")})` : backgroundColors[0] ?? "transparent";
+}
+function resolveRequiredGroups(categoryGroups, requiredMarkingGroups) {
+  const markingIdToName = new Map(categoryGroups.flatMap((g) => g.markings).map((m) => [m.id, m.name]));
+  return requiredMarkingGroups.map((ids) => ({
+    markingNames: ids.map((id) => markingIdToName.get(id) ?? id)
+  }));
+}
+
+// src/cbac-picker/base/BaseCbacBanner.module.css
+var BaseCbacBanner_default = {};
+
+// src/cbac-picker/base/BaseCbacBanner.tsx
+function BaseCbacBanner({
+  classificationString,
+  textColor,
+  backgroundColors,
+  onClick,
+  onDismiss,
+  className
+}) {
+  const bannerStyle = React5__default.default.useMemo(() => ({
+    "--osdk-cbac-banner-bg": backgroundFromColors(backgroundColors),
+    "--osdk-cbac-banner-color": textColor
+  }), [textColor, backgroundColors]);
+  const handleDismiss = React5__default.default.useCallback((e) => {
+    e.stopPropagation();
+    onDismiss?.();
+  }, [onDismiss]);
+  const dismissButton = onDismiss != null ? /* @__PURE__ */ React5__default.default.createElement(button.Button, {
+    className: BaseCbacBanner_default.dismissButton,
+    onClick: handleDismiss,
+    "aria-label": "Clear classification"
+  }, /* @__PURE__ */ React5__default.default.createElement(icons.Cross, {
+    size: 12,
+    color: "currentColor"
+  })) : null;
+  if (onClick != null) {
+    return /* @__PURE__ */ React5__default.default.createElement("div", {
+      className: classnames__default.default(BaseCbacBanner_default.bannerRow, className),
+      style: bannerStyle
+    }, /* @__PURE__ */ React5__default.default.createElement(button.Button, {
+      className: classnames__default.default(BaseCbacBanner_default.banner, BaseCbacBanner_default.clickable),
+      onClick,
+      "aria-label": "Edit classification"
+    }, classificationString), dismissButton);
+  }
+  return /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: classnames__default.default(BaseCbacBanner_default.bannerRow, className),
+    style: bannerStyle
+  }, /* @__PURE__ */ React5__default.default.createElement("span", {
+    className: BaseCbacBanner_default.banner
+  }, classificationString), dismissButton);
+}
+
+// src/cbac-picker/base/BaseCbacPicker.module.css
+var BaseCbacPicker_default = {};
+
+// src/cbac-picker/base/CategoryMarkingGroup.module.css
+var CategoryMarkingGroup_default = {};
+
+// src/cbac-picker/base/MarkingButton.module.css
+var MarkingButton_default = {};
+
+// src/cbac-picker/base/selectionStateHelpers.ts
+function isDisallowed(state) {
+  return state === "DISALLOWED" || state === "IMPLIED_DISALLOWED";
+}
+function isImplied(state) {
+  return state === "IMPLIED" || state === "IMPLIED_DISALLOWED";
+}
+function getDisplayLabel(label, state) {
+  return isImplied(state) ? `(${label})` : label;
+}
+
+// src/cbac-picker/base/MarkingButton.tsx
+var selectionStateClassMap = {
+  SELECTED: MarkingButton_default.selected,
+  IMPLIED: MarkingButton_default.implied,
+  DISALLOWED: MarkingButton_default.disallowed,
+  IMPLIED_DISALLOWED: MarkingButton_default.impliedDisallowed,
+  NONE: void 0
+};
+function MarkingButton({
+  label,
+  selectionState,
+  onToggle,
+  disabled
+}) {
+  return /* @__PURE__ */ React5__default.default.createElement(button.Button, {
+    className: classnames__default.default(MarkingButton_default.markingButton, selectionStateClassMap[selectionState]),
+    onClick: onToggle,
+    disabled: disabled ?? isDisallowed(selectionState),
+    "aria-pressed": selectionState === "SELECTED" || selectionState === "IMPLIED"
+  }, getDisplayLabel(label, selectionState));
+}
+
+// src/cbac-picker/base/OverflowButton.module.css
+var OverflowButton_default = {};
+
+// src/cbac-picker/base/OverflowItem.module.css
+var OverflowItem_default = {};
+
+// src/cbac-picker/base/OverflowItem.tsx
+var OverflowItem = /* @__PURE__ */ React5__default.default.memo(function OverflowItem2({
+  id,
+  label,
+  selectionState,
+  disabled,
+  onToggle
+}) {
+  const handleClick = React5__default.default.useCallback(() => {
+    onToggle(id);
+  }, [onToggle, id]);
+  const disallowed = isDisallowed(selectionState);
+  const isSelected = selectionState === "SELECTED";
+  const implied = isImplied(selectionState);
+  return /* @__PURE__ */ React5__default.default.createElement(button.Button, {
+    className: classnames__default.default(OverflowItem_default.overflowItem, (isSelected || implied) && OverflowItem_default.overflowItemSelected, disallowed && OverflowItem_default.overflowItemDisabled),
+    onClick: handleClick,
+    disabled: disabled ?? disallowed,
+    "aria-pressed": isSelected || implied
+  }, getDisplayLabel(label, selectionState));
+});
+
+// src/cbac-picker/base/OverflowButton.tsx
+function OverflowButton({
+  overflowMarkings,
+  hasActiveOverflow,
+  onMarkingToggle
+}) {
+  const [open, setOpen] = React5__default.default.useState(false);
+  return /* @__PURE__ */ React5__default.default.createElement(popover.Popover.Root, {
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React5__default.default.createElement(popover.Popover.Trigger, {
+    render: /* @__PURE__ */ React5__default.default.createElement(button.Button, {
+      className: classnames__default.default(OverflowButton_default.moreButton, hasActiveOverflow && OverflowButton_default.moreButtonActive)
+    }, "+", overflowMarkings.length, " more")
+  }), /* @__PURE__ */ React5__default.default.createElement(popover.Popover.Portal, null, /* @__PURE__ */ React5__default.default.createElement(popover.Popover.Positioner, {
+    side: "bottom",
+    align: "start"
+  }, /* @__PURE__ */ React5__default.default.createElement(popover.Popover.Popup, {
+    className: OverflowButton_default.overflowList
+  }, overflowMarkings.map((marking) => /* @__PURE__ */ React5__default.default.createElement(OverflowItem, {
+    key: marking.id,
+    id: marking.id,
+    label: marking.label,
+    selectionState: marking.selectionState,
+    disabled: marking.disabled,
+    onToggle: onMarkingToggle
+  }))))));
+}
+
+// src/cbac-picker/base/CategoryMarkingGroup.tsx
+var GRID_COLUMNS = 4;
+var VISIBLE_ROWS = 3;
+var DEFAULT_MARKING_STATE = "NONE";
+var CategoryMarkingGroup = /* @__PURE__ */ React5__default.default.memo(function CategoryMarkingGroup2({
+  categoryName,
+  markings,
+  markingStates,
+  readOnly,
+  onMarkingToggle
+}) {
+  const headingId = React5__default.default.useId();
+  const resolvedMarkings = React5__default.default.useMemo(() => markings.map((marking) => ({
+    id: marking.id,
+    label: marking.name,
+    selectionState: markingStates.get(marking.id) ?? DEFAULT_MARKING_STATE,
+    disabled: readOnly
+  })), [markings, markingStates, readOnly]);
+  const maxVisible = GRID_COLUMNS * VISIBLE_ROWS;
+  const hasOverflow = resolvedMarkings.length > maxVisible;
+  const visibleMarkings = hasOverflow ? resolvedMarkings.slice(0, maxVisible - 1) : resolvedMarkings;
+  const overflowMarkings = hasOverflow ? resolvedMarkings.slice(maxVisible - 1) : [];
+  const gridItemCount = hasOverflow ? visibleMarkings.length + 1 : visibleMarkings.length;
+  const emptyCellCount = (GRID_COLUMNS - gridItemCount % GRID_COLUMNS) % GRID_COLUMNS;
+  const hasActiveOverflow = overflowMarkings.some((m) => m.selectionState === "SELECTED" || isImplied(m.selectionState));
+  return /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: CategoryMarkingGroup_default.categoryGroup,
+    role: "group",
+    "aria-labelledby": headingId
+  }, /* @__PURE__ */ React5__default.default.createElement("h3", {
+    id: headingId,
+    className: CategoryMarkingGroup_default.categoryName
+  }, categoryName), /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: CategoryMarkingGroup_default.markingGrid
+  }, visibleMarkings.map((marking) => /* @__PURE__ */ React5__default.default.createElement(MarkingButtonItem, {
+    key: marking.id,
+    id: marking.id,
+    label: marking.label,
+    selectionState: marking.selectionState,
+    disabled: marking.disabled,
+    onToggle: onMarkingToggle
+  })), hasOverflow && /* @__PURE__ */ React5__default.default.createElement(OverflowButton, {
+    overflowMarkings,
+    hasActiveOverflow,
+    onMarkingToggle
+  }), Array.from({
+    length: emptyCellCount
+  }, (_, i) => /* @__PURE__ */ React5__default.default.createElement("div", {
+    key: `empty-${i}`,
+    className: CategoryMarkingGroup_default.emptyCell
+  }))));
+});
+var MarkingButtonItem = /* @__PURE__ */ React5__default.default.memo(function MarkingButtonItem2({
+  id,
+  label,
+  selectionState,
+  disabled,
+  onToggle
+}) {
+  const handleToggle = React5__default.default.useCallback(() => {
+    onToggle(id);
+  }, [onToggle, id]);
+  return /* @__PURE__ */ React5__default.default.createElement(MarkingButton, {
+    label,
+    selectionState,
+    onToggle: handleToggle,
+    disabled
+  });
+});
+
+// src/cbac-picker/base/InfoBanner.module.css
+var InfoBanner_default = {};
+
+// src/cbac-picker/base/InfoBanner.tsx
+function InfoBanner({
+  message,
+  className
+}) {
+  return /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: classnames__default.default(InfoBanner_default.infoBanner, className)
+  }, /* @__PURE__ */ React5__default.default.createElement(icons.InfoSign, {
+    className: InfoBanner_default.icon,
+    size: 14
+  }), /* @__PURE__ */ React5__default.default.createElement("span", null, message));
+}
+
+// src/cbac-picker/base/ValidationWarning.module.css
+var ValidationWarning_default = {};
+
+// src/cbac-picker/base/ValidationWarning.tsx
+function ValidationWarning({
+  requiredMarkingGroups,
+  className
+}) {
+  return /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: classnames__default.default(ValidationWarning_default.validationWarning, className)
+  }, /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: ValidationWarning_default.header
+  }, /* @__PURE__ */ React5__default.default.createElement(icons.WarningSign, {
+    className: ValidationWarning_default.icon,
+    size: 14
+  }), /* @__PURE__ */ React5__default.default.createElement("span", null, "To complete a valid classification, at least one marking from each of the following sets needs to be selected:")), /* @__PURE__ */ React5__default.default.createElement("ol", {
+    className: ValidationWarning_default.groupList
+  }, requiredMarkingGroups.map((group, index) => /* @__PURE__ */ React5__default.default.createElement("li", {
+    key: group.markingNames.join(","),
+    className: ValidationWarning_default.groupItem
+  }, /* @__PURE__ */ React5__default.default.createElement("span", {
+    className: ValidationWarning_default.groupNumber
+  }, index + 1, "."), group.markingNames.map((name) => /* @__PURE__ */ React5__default.default.createElement("span", {
+    key: name,
+    className: ValidationWarning_default.chip
+  }, name))))));
+}
+
+// src/cbac-picker/base/BaseCbacPicker.tsx
+function BaseCbacPicker({
+  categories,
+  markingStates,
+  banner,
+  onMarkingToggle,
+  onDismissBanner,
+  showInfoBanner,
+  requiredMarkingGroups,
+  isValid,
+  readOnly,
+  isLoading,
+  error,
+  className
+}) {
+  const showInitialLoading = isLoading === true && categories.length === 0;
+  const showValidationWarning = isValid === false && requiredMarkingGroups != null && requiredMarkingGroups.length > 0;
+  return /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: classnames__default.default(BaseCbacPicker_default.picker, className)
+  }, showInfoBanner === true && /* @__PURE__ */ React5__default.default.createElement(InfoBanner, {
+    message: "Implied markings are (in parentheses)."
+  }), banner != null && /* @__PURE__ */ React5__default.default.createElement(BaseCbacBanner, {
+    classificationString: banner.classificationString,
+    textColor: banner.textColor,
+    backgroundColors: banner.backgroundColors,
+    onDismiss: onDismissBanner,
+    className: BaseCbacPicker_default.innerBanner
+  }), error != null ? /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: BaseCbacPicker_default.statusMessage,
+    role: "alert"
+  }, error.message) : showInitialLoading ? /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: BaseCbacPicker_default.statusMessage,
+    role: "status",
+    "aria-live": "polite"
+  }, "Loading...") : /* @__PURE__ */ React5__default.default.createElement("div", {
+    className: BaseCbacPicker_default.categoriesContainer
+  }, categories.map((group) => /* @__PURE__ */ React5__default.default.createElement(CategoryMarkingGroup, {
+    key: group.category.id,
+    categoryName: group.category.name,
+    markings: group.markings,
+    markingStates,
+    readOnly,
+    onMarkingToggle
+  }))), showValidationWarning && /* @__PURE__ */ React5__default.default.createElement(ValidationWarning, {
+    requiredMarkingGroups
+  }));
+}
+
 // src/cbac-picker/utils/selectionLogic.ts
 function toggleMarking(markingId, currentSelection, categories) {
   const isSelected = currentSelection.includes(markingId);
@@ -35,16 +369,16 @@ function computeMarkingStates(selectedIds, impliedIds, disallowedIds) {
   const disallowedSet = new Set(disallowedIds);
   const allIds = /* @__PURE__ */ new Set([...selectedIds, ...impliedIds, ...disallowedIds]);
   for (const id of allIds) {
-    const isImplied = impliedSet.has(id);
-    const isDisallowed = disallowedSet.has(id);
+    const isImplied2 = impliedSet.has(id);
+    const isDisallowed2 = disallowedSet.has(id);
     const isSelected = selectedSet.has(id);
     if (isSelected) {
       states.set(id, "SELECTED");
-    } else if (isImplied && isDisallowed) {
+    } else if (isImplied2 && isDisallowed2) {
       states.set(id, "IMPLIED_DISALLOWED");
-    } else if (isImplied) {
+    } else if (isImplied2) {
       states.set(id, "IMPLIED");
-    } else if (isDisallowed) {
+    } else if (isDisallowed2) {
       states.set(id, "DISALLOWED");
     }
   }
@@ -73,6 +407,257 @@ function groupMarkingsByCategory(markings, categories) {
   return groups;
 }
 
+// src/cbac-picker/useCbacPickerState.ts
+var EMPTY_GROUPS = [];
+function useStableArray(arr) {
+  const ref = React5__default.default.useRef(arr);
+  if (arr.length !== ref.current.length || arr.some((id, i) => id !== ref.current[i])) {
+    ref.current = arr;
+  }
+  return ref.current;
+}
+function useCbacPickerState(selectedIds) {
+  const stableSelectedIds = useStableArray(selectedIds);
+  const {
+    categories: rawCategories,
+    isLoading: categoriesLoading,
+    error: categoriesError
+  } = admin.useMarkingCategories();
+  const {
+    markings: rawMarkings,
+    isLoading: markingsLoading,
+    error: markingsError
+  } = admin.useMarkings();
+  const {
+    banner,
+    isLoading: bannerLoading,
+    error: bannerError
+  } = admin.useCbacBanner({
+    markingIds: stableSelectedIds
+  });
+  const {
+    restrictions,
+    isLoading: restrictionsLoading,
+    error: restrictionsError
+  } = admin.useCbacMarkingRestrictions({
+    markingIds: stableSelectedIds
+  });
+  const impliedMarkingIds = restrictions?.impliedMarkings ?? EMPTY_ARRAY;
+  const disallowedMarkingIds = restrictions?.disallowedMarkings ?? EMPTY_ARRAY;
+  const requiredMarkingGroups = restrictions?.requiredMarkings ?? EMPTY_GROUPS;
+  const isValid = restrictions?.isValid ?? true;
+  const isLoading = categoriesLoading || markingsLoading || restrictionsLoading || bannerLoading;
+  const error = React5__default.default.useMemo(() => {
+    const errors = [categoriesError, markingsError, restrictionsError, bannerError].filter((e) => e != null);
+    if (errors.length > 1) {
+      return new AggregateError(errors, errors.map((e) => e.message).join("; "));
+    }
+    return errors[0];
+  }, [categoriesError, markingsError, restrictionsError, bannerError]);
+  const categoryGroups = React5__default.default.useMemo(() => {
+    if (rawCategories === void 0 || rawMarkings === void 0) {
+      return [];
+    }
+    return groupMarkingsByCategory(rawMarkings, rawCategories);
+  }, [rawMarkings, rawCategories]);
+  const markingStates = React5__default.default.useMemo(() => computeMarkingStates(stableSelectedIds, impliedMarkingIds, disallowedMarkingIds), [stableSelectedIds, impliedMarkingIds, disallowedMarkingIds]);
+  const resolvedRequiredGroups = React5__default.default.useMemo(() => resolveRequiredGroups(categoryGroups, requiredMarkingGroups), [categoryGroups, requiredMarkingGroups]);
+  return React5__default.default.useMemo(() => ({
+    categoryGroups,
+    markingStates,
+    banner,
+    requiredMarkingGroups: resolvedRequiredGroups,
+    isValid,
+    isLoading,
+    error
+  }), [categoryGroups, markingStates, banner, resolvedRequiredGroups, isValid, isLoading, error]);
+}
+
+// src/cbac-picker/CbacPicker.tsx
+function CbacPicker({
+  initialMarkingIds,
+  onChange,
+  readOnly,
+  className
+}) {
+  const [selectedIds, setSelectedIds] = React5__default.default.useState(initialMarkingIds ?? EMPTY_ARRAY);
+  const [prevInitialIds, setPrevInitialIds] = React5__default.default.useState(initialMarkingIds);
+  if (initialMarkingIds !== prevInitialIds) {
+    setPrevInitialIds(initialMarkingIds);
+    setSelectedIds(initialMarkingIds ?? EMPTY_ARRAY);
+  }
+  const {
+    categoryGroups,
+    markingStates,
+    banner,
+    requiredMarkingGroups,
+    isValid,
+    isLoading,
+    error
+  } = useCbacPickerState(selectedIds);
+  const handleMarkingToggle = React5__default.default.useCallback((markingId) => {
+    if (readOnly) {
+      return;
+    }
+    const newSelection = toggleMarking(markingId, selectedIds, categoryGroups);
+    setSelectedIds(newSelection);
+    onChange(newSelection);
+  }, [readOnly, selectedIds, categoryGroups, onChange]);
+  const handleDismiss = React5__default.default.useCallback(() => {
+    setSelectedIds(EMPTY_ARRAY);
+    onChange(EMPTY_ARRAY);
+  }, [onChange]);
+  return /* @__PURE__ */ React5__default.default.createElement(BaseCbacPicker, {
+    categories: categoryGroups,
+    markingStates,
+    banner,
+    onMarkingToggle: handleMarkingToggle,
+    onDismissBanner: handleDismiss,
+    requiredMarkingGroups,
+    isValid,
+    readOnly,
+    isLoading,
+    error,
+    className
+  });
+}
+
+// src/cbac-picker/base/CbacPickerDialogFooter.module.css
+var CbacPickerDialogFooter_default = {};
+
+// src/cbac-picker/base/CbacPickerDialogFooter.tsx
+function CbacPickerDialogFooter({
+  onCancel,
+  onConfirm,
+  submitDisabledReason
+}) {
+  const isSubmitDisabled = submitDisabledReason != null;
+  const submitButton = /* @__PURE__ */ React5__default.default.createElement(primitives.ActionButton, {
+    variant: "primary",
+    onClick: onConfirm,
+    disabled: isSubmitDisabled
+  }, "Set classification");
+  return /* @__PURE__ */ React5__default.default.createElement(React5__default.default.Fragment, null, /* @__PURE__ */ React5__default.default.createElement(primitives.ActionButton, {
+    variant: "secondary",
+    onClick: onCancel
+  }, "Cancel"), isSubmitDisabled ? /* @__PURE__ */ React5__default.default.createElement(primitives.Tooltip.Root, null, /* @__PURE__ */ React5__default.default.createElement(primitives.Tooltip.Trigger, {
+    render: /* @__PURE__ */ React5__default.default.createElement("span", {
+      className: CbacPickerDialogFooter_default.tooltipTriggerWrapper
+    })
+  }, submitButton), /* @__PURE__ */ React5__default.default.createElement(primitives.Tooltip.Portal, null, /* @__PURE__ */ React5__default.default.createElement(primitives.Tooltip.Positioner, {
+    side: "top"
+  }, /* @__PURE__ */ React5__default.default.createElement(primitives.Tooltip.Popup, null, submitDisabledReason, /* @__PURE__ */ React5__default.default.createElement(primitives.Tooltip.Arrow, null))))) : submitButton);
+}
+
+// src/cbac-picker/base/BaseCbacPickerDialog.tsx
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function BaseCbacPickerDialog({
+  isOpen,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+  title = "Select classification",
+  submitDisabledReason,
+  ...pickerProps
+}) {
+  const handleOpenChange = React5__default.default.useCallback((open) => {
+    if (!open) {
+      onCancel();
+    }
+    onOpenChange(open);
+  }, [onCancel, onOpenChange]);
+  return /* @__PURE__ */ React5__default.default.createElement(primitives.Dialog, {
+    isOpen,
+    onOpenChange: handleOpenChange,
+    title,
+    footer: /* @__PURE__ */ React5__default.default.createElement(CbacPickerDialogFooter, {
+      onCancel,
+      onConfirm,
+      submitDisabledReason
+    }),
+    disablePointerDismissal: true
+  }, /* @__PURE__ */ React5__default.default.createElement(BaseCbacPicker, _extends({}, pickerProps, {
+    showInfoBanner: pickerProps.showInfoBanner ?? true
+  })));
+}
+
+// src/cbac-picker/CbacPickerDialog.tsx
+function CbacPickerDialog({
+  isOpen,
+  onOpenChange,
+  onConfirm,
+  initialMarkingIds
+}) {
+  const [selectedIds, setSelectedIds] = React5__default.default.useState(initialMarkingIds ?? EMPTY_ARRAY);
+  const [prevInitialIds, setPrevInitialIds] = React5__default.default.useState(initialMarkingIds);
+  if (initialMarkingIds !== prevInitialIds) {
+    setPrevInitialIds(initialMarkingIds);
+    setSelectedIds(initialMarkingIds ?? EMPTY_ARRAY);
+  }
+  const {
+    categoryGroups,
+    markingStates,
+    banner,
+    requiredMarkingGroups,
+    isValid,
+    isLoading,
+    error
+  } = useCbacPickerState(selectedIds);
+  const handleMarkingToggle = React5__default.default.useCallback((markingId) => {
+    setSelectedIds((prev) => toggleMarking(markingId, prev, categoryGroups));
+  }, [categoryGroups]);
+  const handleConfirm = React5__default.default.useCallback(() => {
+    onConfirm(selectedIds);
+  }, [onConfirm, selectedIds]);
+  const handleCancel = React5__default.default.useCallback(() => {
+    setSelectedIds(initialMarkingIds ?? EMPTY_ARRAY);
+    onOpenChange(false);
+  }, [initialMarkingIds, onOpenChange]);
+  const handleDismiss = React5__default.default.useCallback(() => {
+    setSelectedIds(EMPTY_ARRAY);
+  }, []);
+  const hasInitialMarkings = initialMarkingIds !== void 0 && initialMarkingIds.length > 0;
+  const submitDisabledReason = React5__default.default.useMemo(() => {
+    if (isValid) {
+      return void 0;
+    }
+    if (requiredMarkingGroups.length > 0) {
+      return "Selected markings do not include all required markings.";
+    }
+    return "Invalid marking selection.";
+  }, [isValid, requiredMarkingGroups.length]);
+  return /* @__PURE__ */ React5__default.default.createElement(BaseCbacPickerDialog, {
+    isOpen,
+    onOpenChange,
+    onConfirm: handleConfirm,
+    onCancel: handleCancel,
+    title: hasInitialMarkings ? "Edit classification" : "Add classification",
+    categories: categoryGroups,
+    markingStates,
+    banner,
+    onMarkingToggle: handleMarkingToggle,
+    onDismissBanner: handleDismiss,
+    requiredMarkingGroups,
+    isValid,
+    submitDisabledReason,
+    isLoading,
+    error
+  });
+}
+
+exports.BaseCbacBanner = BaseCbacBanner;
+exports.BaseCbacPicker = BaseCbacPicker;
+exports.BaseCbacPickerDialog = BaseCbacPickerDialog;
+exports.CbacPicker = CbacPicker;
+exports.CbacPickerDialog = CbacPickerDialog;
 exports.computeMarkingStates = computeMarkingStates;
 exports.groupMarkingsByCategory = groupMarkingsByCategory;
 exports.toggleMarking = toggleMarking;