asma-ui-core 3.80.3 → 3.81.0

package/dist/index.js

@@ -227,58 +227,60 @@ import { StyledSwitch as Tp } from "./components/inputs/switch/base-ui/StyledSwi
 import { StyledRadioGroup as Ap } from "./components/inputs/radio-button/base-ui/StyledRadioGroup.js";
 import { StyledLabel as Mp } from "./components/inputs/label/StyledLabel.js";
 import { StyledDynamicSelect as wp } from "./components/inputs/dynamic-select/StyledDynamicSelect.js";
-import { StyledFormControl as Hp } from "./components/miscellaneous/StyledFormControl.js";
-import { defaultDatePickerValidationMessages as xp, useDatePickerValidation as _p } from "./datetime/components/date-picker/hooks/useDatePickerValidation.js";
-import { StyledDrawer as Wp } from "./components/navigation/drawer/StyledDrawer.js";
-import { StyledDatePicker as Vp } from "./datetime/components/date-picker/StyledDatePicker.js";
-import { PopupState as Gp, bindPopover as Xp, bindPopper as qp, bindTrigger as Kp, usePopupState as Qp } from "./hooks/usePopupState.js";
-import { ClickAwayListener as jp } from "./components/mui-compat/ClickAwayListener.js";
-import { Paper as Yp } from "./components/mui-compat/Paper.js";
-import { Stack as of } from "./components/mui-compat/Stack.js";
-import { Container as mf } from "./components/mui-compat/Container.js";
-import { Avatar as ef } from "./components/mui-compat/Avatar.js";
-import { Skeleton as pf } from "./components/mui-compat/Skeleton.js";
-import { FormLabel as cf } from "./components/mui-compat/FormLabel.js";
-import { Fade as If } from "./components/mui-compat/Fade.js";
-import { Popper as df } from "./components/mui-compat/Popper.js";
-import { defaultTimePickerHelperMessages as Sf } from "./datetime/components/time-picker/components/HelperText.js";
-import { StyledTimePicker as yf } from "./datetime/components/time-picker/StyledTimePicker.js";
-import { setMidnightTime as Of, setZeroTime as gf } from "./datetime/helpers/date.helper.js";
-import { StyledFormControlLabel as hf } from "./components/miscellaneous/StyledFormControlLabel.js";
-import { StyledFormHelperText as bf } from "./components/miscellaneous/StyledFormHelperText.js";
-import { StyledInputLabel as Pf } from "./components/miscellaneous/StyledInputLabel.js";
-import { StyledFormGroup as Ff } from "./components/miscellaneous/StyledFormGroup.js";
-import { StyledLink as Rf } from "./components/navigation/link/StyledLink.js";
-import { StyledTab as vf } from "./components/navigation/tabs/StyledTab.js";
-import { StyledTabs as Bf } from "./components/navigation/tabs/StyledTabs.js";
-import { StyledTitleChevron as Nf } from "./components/navigation/title-chevron/StyledTitleChevron.js";
-import { Listbox as _f } from "./components/navigation/listbox/Listbox.js";
-import { StyledAccordion as Wf } from "./components/utils/accordion/base-ui/StyledAccordion.js";
-import { StyledAccordionSummary as Vf } from "./components/utils/accordion/base-ui/StyledAccordionSummary.js";
-import { StyledAccordionDetails as Gf } from "./components/utils/accordion/base-ui/StyledAccordionDetails.js";
-import { ACTIONS_COLUMN_ID as qf, DND_HANDLE_COLUMN_ID as Kf, EXPAND_COLUMN_ID as Qf, INTERNAL_COLUMN_IDS as Zf, SELECT_COLUMN_ID as jf, SHOW_FULL_TEXT_ID as Jf, isCustomAction as Yf } from "./table/types.js";
-import { RowDragHandleCell as oc } from "./table/components/columns/dndHandleColumn.js";
-import { StyledTable as mc } from "./table/components/StyledTableIndex.js";
-import { createColumnHelper as ic } from "./table/index.js";
-import { DynamicToolbarLayoutContext as nc, useDynamicToolbarLayout as pc } from "./components/custom/module/header-layout/DynamicToolbarLayoutContext.js";
-import { StyledFilterButton as cc } from "./components/utils/filter-menu/StyledFilterButton.js";
-import { StyledFilterMenu as Ic } from "./components/utils/filter-menu/StyledFilterMenu.js";
-import { CopyButton as dc } from "./components/utils/copy-wrapper/CopyButton.js";
-import { CopyWrapper as Sc } from "./components/utils/copy-wrapper/CopyWrapper.js";
-import { VirtualList as yc } from "./components/utils/virtual-list/VirtualList.js";
-import { StyledWidgetTitle as Oc } from "./components/custom/widget/widget-title/StyledWidgetTitle.js";
-import { StyledWidgetHeader as Dc } from "./components/custom/widget/widget-header/StyledWidgetHeader.js";
-import { StyledWidget as kc } from "./components/custom/widget/widget/StyledWidget.js";
-import { StyledModuleTitle as Lc } from "./components/custom/module/module-title/StyledModuleTitle.js";
-import { DynamicToolbar as Tc } from "./components/custom/module/header-layout/DynamicToolbar.js";
-import { PageHeader as Ac } from "./components/custom/page/page-header/PageHeader.js";
-import { MinimizableDialog as Mc } from "./components/feedback/minimizable-dialog/MinimizableDialog.js";
-import { MinimizableDialogV2 as wc } from "./components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js";
-import { createDialogStack as Hc } from "./components/feedback/minimizable-dialog/stack/createDialogStack.js";
-import { PathfinderCard as xc } from "./components/custom/pathfinder-card/PathfinderCard.js";
-import { useRouteHeadingFocus as Ec } from "./hooks/useRouteHeadingFocus.js";
+import { StyledLink as Hp } from "./components/navigation/link/StyledLink.js";
+import { StyledPhoneField as xp } from "./components/inputs/phone-field/StyledPhoneField.js";
+import { StyledCountryFlag as Ep } from "./components/inputs/phone-field/StyledCountryFlag.js";
+import { StyledFormControl as Up } from "./components/miscellaneous/StyledFormControl.js";
+import { defaultDatePickerValidationMessages as zp, useDatePickerValidation as Gp } from "./datetime/components/date-picker/hooks/useDatePickerValidation.js";
+import { StyledDrawer as qp } from "./components/navigation/drawer/StyledDrawer.js";
+import { StyledDatePicker as Qp } from "./datetime/components/date-picker/StyledDatePicker.js";
+import { PopupState as jp, bindPopover as Jp, bindPopper as Yp, bindTrigger as $p, usePopupState as of } from "./hooks/usePopupState.js";
+import { ClickAwayListener as mf } from "./components/mui-compat/ClickAwayListener.js";
+import { Paper as ef } from "./components/mui-compat/Paper.js";
+import { Stack as pf } from "./components/mui-compat/Stack.js";
+import { Container as cf } from "./components/mui-compat/Container.js";
+import { Avatar as If } from "./components/mui-compat/Avatar.js";
+import { Skeleton as df } from "./components/mui-compat/Skeleton.js";
+import { FormLabel as Sf } from "./components/mui-compat/FormLabel.js";
+import { Fade as yf } from "./components/mui-compat/Fade.js";
+import { Popper as Of } from "./components/mui-compat/Popper.js";
+import { defaultTimePickerHelperMessages as Df } from "./datetime/components/time-picker/components/HelperText.js";
+import { StyledTimePicker as kf } from "./datetime/components/time-picker/StyledTimePicker.js";
+import { setMidnightTime as Lf, setZeroTime as Pf } from "./datetime/helpers/date.helper.js";
+import { StyledFormControlLabel as Ff } from "./components/miscellaneous/StyledFormControlLabel.js";
+import { StyledFormHelperText as Rf } from "./components/miscellaneous/StyledFormHelperText.js";
+import { StyledInputLabel as vf } from "./components/miscellaneous/StyledInputLabel.js";
+import { StyledFormGroup as Bf } from "./components/miscellaneous/StyledFormGroup.js";
+import { StyledTab as Nf } from "./components/navigation/tabs/StyledTab.js";
+import { StyledTabs as _f } from "./components/navigation/tabs/StyledTabs.js";
+import { StyledTitleChevron as Wf } from "./components/navigation/title-chevron/StyledTitleChevron.js";
+import { Listbox as Vf } from "./components/navigation/listbox/Listbox.js";
+import { StyledAccordion as Gf } from "./components/utils/accordion/base-ui/StyledAccordion.js";
+import { StyledAccordionSummary as qf } from "./components/utils/accordion/base-ui/StyledAccordionSummary.js";
+import { StyledAccordionDetails as Qf } from "./components/utils/accordion/base-ui/StyledAccordionDetails.js";
+import { ACTIONS_COLUMN_ID as jf, DND_HANDLE_COLUMN_ID as Jf, EXPAND_COLUMN_ID as Yf, INTERNAL_COLUMN_IDS as $f, SELECT_COLUMN_ID as oc, SHOW_FULL_TEXT_ID as rc, isCustomAction as mc } from "./table/types.js";
+import { RowDragHandleCell as ic } from "./table/components/columns/dndHandleColumn.js";
+import { StyledTable as nc } from "./table/components/StyledTableIndex.js";
+import { createColumnHelper as fc } from "./table/index.js";
+import { DynamicToolbarLayoutContext as lc, useDynamicToolbarLayout as Ic } from "./components/custom/module/header-layout/DynamicToolbarLayoutContext.js";
+import { StyledFilterButton as dc } from "./components/utils/filter-menu/StyledFilterButton.js";
+import { StyledFilterMenu as Sc } from "./components/utils/filter-menu/StyledFilterMenu.js";
+import { CopyButton as yc } from "./components/utils/copy-wrapper/CopyButton.js";
+import { CopyWrapper as Oc } from "./components/utils/copy-wrapper/CopyWrapper.js";
+import { VirtualList as Dc } from "./components/utils/virtual-list/VirtualList.js";
+import { StyledWidgetTitle as kc } from "./components/custom/widget/widget-title/StyledWidgetTitle.js";
+import { StyledWidgetHeader as Lc } from "./components/custom/widget/widget-header/StyledWidgetHeader.js";
+import { StyledWidget as Tc } from "./components/custom/widget/widget/StyledWidget.js";
+import { StyledModuleTitle as Ac } from "./components/custom/module/module-title/StyledModuleTitle.js";
+import { DynamicToolbar as Mc } from "./components/custom/module/header-layout/DynamicToolbar.js";
+import { PageHeader as wc } from "./components/custom/page/page-header/PageHeader.js";
+import { MinimizableDialog as Hc } from "./components/feedback/minimizable-dialog/MinimizableDialog.js";
+import { MinimizableDialogV2 as xc } from "./components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js";
+import { createDialogStack as Ec } from "./components/feedback/minimizable-dialog/stack/createDialogStack.js";
+import { PathfinderCard as Uc } from "./components/custom/pathfinder-card/PathfinderCard.js";
+import { useRouteHeadingFocus as zc } from "./hooks/useRouteHeadingFocus.js";
 export {
-  qf as ACTIONS_COLUMN_ID,
+  jf as ACTIONS_COLUMN_ID,
   Bn as ACTION_GAP_PX,
   zi as AppRegistrationIcon,
   wo as ArchiveIcon,
@@ -289,7 +291,7 @@ export {
   j as AssignmentIcon,
   Y as AssignmentOutlineIcon,
   wt as AttachFileIcon,
-  ef as Avatar,
+  If as Avatar,
   xm as BackIcon,
   Mi as BackupIcon,
   tm as BadgeIcon,
@@ -317,22 +319,22 @@ export {
   s as ChevronRightIcon,
   Uo as ChevronUpIcon,
   Ui as CircleWarningOutlineIcon,
-  jp as ClickAwayListener,
+  mf as ClickAwayListener,
   Lm as ClockOutlineIcon,
   zo as CloseIcon,
   At as CloudDoneOutlineIcon,
   Mt as CloudIcon,
   Ji as CloudOffOutlineIcon,
   Zr as ConsentsIcon,
-  mf as Container,
+  cf as Container,
   St as ContentCopyIcon,
   Dt as ContentCopyOutlineIcon,
   yt as ContentCutIcon,
   Ot as ContentPasteIcon,
   ri as ConversionPathIcon,
-  dc as CopyButton,
-  Sc as CopyWrapper,
-  Kf as DND_HANDLE_COLUMN_ID,
+  yc as CopyButton,
+  Oc as CopyWrapper,
+  Jf as DND_HANDLE_COLUMN_ID,
   F as DashboardViewIcon,
   R as DashboardViewOutlineIcon,
   cr as DeleteOutlineIcon,
@@ -351,16 +353,16 @@ export {
   Ao as DropUpIcon,
   yr as DvrIcon,
   Ai as DvrIconOutline,
-  Tc as DynamicToolbar,
-  nc as DynamicToolbarLayoutContext,
-  Qf as EXPAND_COLUMN_ID,
+  Mc as DynamicToolbar,
+  lc as DynamicToolbarLayoutContext,
+  Yf as EXPAND_COLUMN_ID,
   Er as EarthIcon,
   ye as EditNotesIcon,
   em as EditSquareIcon,
   tr as EmptyPageIcon,
   Si as EnvelopeIcon,
   Or as ErrorOutlineIcon,
-  If as Fade,
+  yf as Fade,
   Tr as FastCheckOutlineIcon,
   Ti as FileDocIcon,
   De as FileImageIcon,
@@ -373,7 +375,7 @@ export {
   yo as FindReplacePeopleIcon,
   yi as FingerprintIcon,
   Dm as FormIcon,
-  cf as FormLabel,
+  Sf as FormLabel,
   tt as FormatListBulletedIcon,
   et as FormatListBulletedOutlineIcon,
   ti as GraphIcon,
@@ -388,7 +390,7 @@ export {
   de as HistoryToggleOffIcon,
   Me as HubIcon,
   we as HubIconFilled,
-  Zf as INTERNAL_COLUMN_IDS,
+  $f as INTERNAL_COLUMN_IDS,
   Jo as InboxOutboxIcon,
   $o as InboxOutboxOutlineIcon,
   Te as IndeterminateIcon,
@@ -401,7 +403,7 @@ export {
   xr as ListSettingsLineIcon,
   Mr as ListStatusIcon,
   wr as ListViewOutlineIcon,
-  _f as Listbox,
+  Vf as Listbox,
   Ue as LoadCurrentIcon,
   To as LoadingIcon,
   Om as LocationIcon,
@@ -414,8 +416,8 @@ export {
   io as MessageProcessingOutlineIcon,
   rm as MessageReplyIcon,
   Am as MicrosoftOutlookIcon,
-  Mc as MinimizableDialog,
-  wc as MinimizableDialogV2,
+  Hc as MinimizableDialog,
+  xc as MinimizableDialogV2,
   Jr as MinimizeIcon,
   Xe as MoveUpIcon,
   G as NewCalendarIcon,
@@ -426,9 +428,9 @@ export {
   Kt as OutlineCheckboxIconChecked,
   Jt as OutlineCheckboxIconIndeterminate,
   zt as OutlineNotificationsIcon,
-  Ac as PageHeader,
-  Yp as Paper,
-  xc as PathfinderCard,
+  wc as PageHeader,
+  ef as Paper,
+  Uc as PathfinderCard,
   P as PdfIcon,
   zr as PencilOutlineIcon,
   B as PeopleIcon,
@@ -442,8 +444,8 @@ export {
   Sm as PinIcon,
   pm as PlusIcon,
   cm as PlusIconCircle,
-  df as Popper,
-  Gp as PopupState,
+  Of as Popper,
+  jp as PopupState,
   b as QnrIcon,
   kt as RefreshIcon,
   di as RemoveIcon,
@@ -454,11 +456,11 @@ export {
   Ie as ResetSettingsIcon,
   Ee as RocketLaunchIcon,
   ze as RotateAutoIcon,
-  oc as RowDragHandleCell,
+  ic as RowDragHandleCell,
   It as RuleIcon,
   dt as RuleOutlineIcon,
-  jf as SELECT_COLUMN_ID,
-  Jf as SHOW_FULL_TEXT_ID,
+  oc as SELECT_COLUMN_ID,
+  rc as SHOW_FULL_TEXT_ID,
   Ii as SaveIcon,
   Lo as SearchIcon,
   Ht as SendIcon,
@@ -467,46 +469,48 @@ export {
   Lt as SettingsNoteIcon,
   ao as SettingsOutlineIcon,
   Ki as ShareIcon,
-  pf as Skeleton,
+  df as Skeleton,
   te as SmsIcon,
   Jn as SnackbarProvider,
-  of as Stack,
+  pf as Stack,
   un as StyledAIDisclosure,
-  Wf as StyledAccordion,
-  Gf as StyledAccordionDetails,
-  Vf as StyledAccordionSummary,
+  Gf as StyledAccordion,
+  Qf as StyledAccordionDetails,
+  qf as StyledAccordionSummary,
   Zn as StyledAlert,
   f as StyledBadge,
   sn as StyledButton,
   $e as StyledCheckbox,
   Je as StyledChip,
-  Vp as StyledDatePicker,
+  Ep as StyledCountryFlag,
+  Qp as StyledDatePicker,
   Cn as StyledDialog,
   gn as StyledDialogActions,
   hn as StyledDialogContent,
   Un as StyledDialogFooter,
   bn as StyledDialogTitle,
-  Wp as StyledDrawer,
+  qp as StyledDrawer,
   wp as StyledDynamicSelect,
   zn as StyledEmptyPage,
-  cc as StyledFilterButton,
-  Ic as StyledFilterMenu,
+  dc as StyledFilterButton,
+  Sc as StyledFilterMenu,
   Xn as StyledFilteredEmptyState,
-  Hp as StyledFormControl,
-  hf as StyledFormControlLabel,
-  Ff as StyledFormGroup,
-  bf as StyledFormHelperText,
+  Up as StyledFormControl,
+  Ff as StyledFormControlLabel,
+  Bf as StyledFormGroup,
+  Rf as StyledFormHelperText,
   an as StyledFormLabel,
   dp as StyledInputField,
-  Pf as StyledInputLabel,
+  vf as StyledInputLabel,
   tn as StyledInteractiveChip,
   Mp as StyledLabel,
-  Rf as StyledLink,
+  Hp as StyledLink,
   Kn as StyledLoading,
   Rn as StyledMenu,
   vn as StyledMenuItem,
   Fn as StyledMenuList,
-  Lc as StyledModuleTitle,
+  Ac as StyledModuleTitle,
+  xp as StyledPhoneField,
   Pn as StyledPopover,
   rn as StyledRadio,
   Ap as StyledRadioGroup,
@@ -517,17 +521,17 @@ export {
   Lp as StyledSlider,
   $n as StyledSnackbar,
   Tp as StyledSwitch,
-  vf as StyledTab,
-  mc as StyledTable,
-  Bf as StyledTabs,
+  Nf as StyledTab,
+  nc as StyledTable,
+  _f as StyledTabs,
   yp as StyledTextarea,
-  yf as StyledTimePicker,
-  Nf as StyledTitleChevron,
+  kf as StyledTimePicker,
+  Wf as StyledTitleChevron,
   nn as StyledTooltip,
   ln as StyledTypography,
-  kc as StyledWidget,
-  Dc as StyledWidgetHeader,
-  Oc as StyledWidgetTitle,
+  Tc as StyledWidget,
+  Lc as StyledWidgetHeader,
+  kc as StyledWidgetTitle,
   Xt as SyncIcon,
   Zi as SyncSavedLocallyIcon,
   Hr as TextBoxCheckOutlineIcon,
@@ -539,7 +543,7 @@ export {
   Ar as UnknownDocumentOutlineRoundedIcon,
   Km as UnlockIcon,
   Oi as UploadIcon,
-  yc as VirtualList,
+  Dc as VirtualList,
   fn as VirtualizedList,
   re as VisibilityOffOutlineIcon,
   $i as VisibilityOutlineIcon,
@@ -548,18 +552,18 @@ export {
   He as WidgetIcon,
   xe as WidgetIconFilled,
   ym as WorkIcon,
-  Xp as bindPopover,
-  qp as bindPopper,
-  Kp as bindTrigger,
+  Jp as bindPopover,
+  Yp as bindPopper,
+  $p as bindTrigger,
   cp as closeSnackbar,
   m as cn,
-  ic as createColumnHelper,
-  Hc as createDialogStack,
-  xp as defaultDatePickerValidationMessages,
-  Sf as defaultTimePickerHelperMessages,
+  fc as createColumnHelper,
+  Ec as createDialogStack,
+  zp as defaultDatePickerValidationMessages,
+  Df as defaultTimePickerHelperMessages,
   lp as enqueueSnackbar,
   Nn as estimateToolbarActionWidth,
-  Yf as isCustomAction,
+  mc as isCustomAction,
   pp as message,
   i as omit,
   xn as planBulkToolbarActions,
@@ -569,11 +573,11 @@ export {
   tp as processDefaultSnackbar,
   ep as processInfoSnackbar,
   En as resolveToolbarActionWidth,
-  Of as setMidnightTime,
-  gf as setZeroTime,
-  _p as useDatePickerValidation,
-  pc as useDynamicToolbarLayout,
-  Qp as usePopupState,
-  Ec as useRouteHeadingFocus,
+  Lf as setMidnightTime,
+  Pf as setZeroTime,
+  Gp as useDatePickerValidation,
+  Ic as useDynamicToolbarLayout,
+  of as usePopupState,
+  zc as useRouteHeadingFocus,
   Ip as useSnackbar
 };

package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts

@@ -0,0 +1,20 @@
+import { PhoneCountryChoice, RenderCountryFlag } from './types';
+export interface CountryCodeOptionsProps {
+    dataTest: string;
+    /** Already filtered — the caller owns the query. */
+    visible: readonly PhoneCountryChoice[];
+    selectedIso2: string;
+    activeIndex: number;
+    optionId: (index: number) => string;
+    onSelect: (iso2: string) => void;
+    listId: string;
+    /** Accessible name for the list. Consumer copy, same string that titles the mobile sheet. */
+    label: string;
+    renderFlag?: RenderCountryFlag;
+    className?: string;
+}
+/**
+ * The country listbox. Presentation only — filtering, the active row and the keyboard live in
+ * [[useCountryPicker]], so the desktop trigger and the mobile sheet render the same list.
+ */
+export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, }: CountryCodeOptionsProps) => JSX.Element;

package/dist/src/components/inputs/phone-field/CountryCodeSelect.d.ts

@@ -0,0 +1,30 @@
+import { PhoneCountryChoice, RenderCountryFlag } from './types';
+export interface CountryCodeSelectProps {
+    dataTest: string;
+    countries: readonly PhoneCountryChoice[];
+    value: string;
+    onChange: (iso2: string) => void;
+    disabled?: boolean;
+    /** Title of the mobile picker sheet; supplied by the consumer — this library ships no copy. */
+    selectCountryLabel: string;
+    /** Placeholder of the mobile sheet's search box. Consumer-supplied. */
+    searchPlaceholder: string;
+    renderFlag?: RenderCountryFlag;
+    /** `id` of the field label, so the trigger inherits the field's accessible name. */
+    labelledBy?: string;
+    /** Surface class shared with the number input so the pair matches. */
+    className?: string;
+}
+/**
+ * Collapsed country trigger (flag + calling code + chevron) and the picker it opens.
+ *
+ * Two presentations, one list and one keyboard contract ([[useCountryPicker]]):
+ *
+ * - **Desktop** — the trigger *is* the combobox. Opening it turns the calling-code slot into an
+ *   input and typing filters the list below, which is what Figma draws (the open trigger carries a
+ *   text cursor, and the menu holds rows only — node 8565:284950 has no search field).
+ * - **Mobile** — a full-screen sheet with its own search box, per node 8699:112423. The break is
+ *   `StyledDialog`'s own `fullScreen ?? isMobile` default (≤743 px), so the two never disagree
+ *   about what "mobile" means.
+ */
+export declare const CountryCodeSelect: ({ dataTest, countries, value, onChange, disabled, selectCountryLabel, searchPlaceholder, renderFlag, labelledBy, className, }: CountryCodeSelectProps) => JSX.Element;

package/dist/src/components/inputs/phone-field/StyledCountryFlag.d.ts

@@ -0,0 +1,34 @@
+export interface StyledCountryFlagProps {
+    /** ISO 3166-1 alpha-2 code, e.g. `'NO'`. Rendered as `data-country` so tests can assert which flag appeared. */
+    iso2: string;
+    /**
+     * URL of the flag artwork, resolved by the consumer. Required because this package is loaded
+     * from the kernel CDN and cannot know where the consuming app hosts its assets — so the
+     * artwork ships with the app, and the app's bundler is what turns it into an address.
+     */
+    src: string;
+    /**
+     * `'eager'` for a flag that is on screen the moment it mounts — the collapsed trigger, and any
+     * row of an already-open picker. Defaults to `'lazy'`, which is right for a long scrolling list
+     * where fetching all 245 up front would move megabytes nobody looks at.
+     */
+    loading?: 'eager' | 'lazy';
+    className?: string;
+}
+/**
+ * @figmaNode none — the Design System has no flag component; the phone field's Figma frames draw
+ * flag artwork directly.
+ *
+ * Real artwork rather than emoji: Windows ships no regional-indicator glyphs, so `🇳🇴` renders as
+ * the letters "NO" in Chrome and Edge there.
+ *
+ * One file per country rather than one sprite, which is a measured choice: the full flag set is
+ * 2.0 MB raw / 619 kB gzipped, dominated by a handful of ornate coats of arms (Serbia alone is
+ * 182 kB), so a sprite would charge every user the whole set to look at ten rows. Per-file fetches
+ * only what is on screen — and Norway, the collapsed default, is 318 bytes.
+ *
+ * The box is painted before the artwork arrives and stays painted if it never does. Sizes vary by
+ * two orders of magnitude across the set, so a row holding a heavy flag would otherwise sit empty
+ * — or show the browser's broken-image glyph — long enough to read as a defect.
+ */
+export declare const StyledCountryFlag: ({ iso2, src, loading, className, }: StyledCountryFlagProps) => JSX.Element;

package/dist/src/components/inputs/phone-field/StyledPhoneField.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { FieldSize } from '../field-styles';
+import { PhoneCountryChoice, RenderCountryFlag } from './types';
+export interface StyledPhoneFieldProps {
+    /** @figmaProp none — test hook */
+    dataTest: string;
+    /** @figmaProp Label above the control pair */
+    label?: ReactNode;
+    countries: readonly PhoneCountryChoice[];
+    /** Selected country as an ISO 3166-1 alpha-2 code. */
+    country: string;
+    onCountryChange: (iso2: string) => void;
+    /**
+     * National significant number as **digits only** — no dial code, no separators. Grouping is a
+     * display concern applied through `formatNationalNumber`, so the value a consumer stores and
+     * the value it reads back are the same string.
+     */
+    value: string;
+    /** Receives the typed national number as digits only. */
+    onChange: (nationalNumber: string) => void;
+    onBlur?: () => void;
+    /** @figmaProp State = true→"Error" — reddens the number input only, per Figma. */
+    error?: boolean;
+    /** @figmaProp Helper text element */
+    helperText?: ReactNode;
+    reserveHelperText?: boolean;
+    /** @figmaProp State = true→"Disabled" */
+    disabled?: boolean;
+    /** @figmaProp State = true→"Read only" — renders the number as text, not as inputs. */
+    readOnly?: boolean;
+    /** Pre-formatted international number for the read-only state, e.g. `'+47 48 01 23 45'`. */
+    readOnlyText?: string;
+    /**
+     * Click-to-call target for the read-only state, e.g. `phoneTelHref(value)` from
+     * `asma-core-helpers/phone`. Supplied by the consumer because building a `tel:` URI is a phone
+     * rule, and this library owns none — without it the number renders as plain text.
+     */
+    readOnlyHref?: string;
+    required?: boolean;
+    /** @figmaProp Placeholder of the number input */
+    placeholder?: string;
+    /**
+     * Per-country grouping for the number input, e.g. `formatNationalAsYouType` from
+     * `asma-core-helpers/phone`. Injected rather than built in: this library owns no phone rules
+     * and no country metadata (ADR-0017 DEC-001).
+     */
+    formatNationalNumber?: (nationalNumber: string, iso2: string) => string;
+    renderFlag?: RenderCountryFlag;
+    /** Title of the country picker. Consumer-supplied — this library ships no user-facing copy. */
+    selectCountryLabel: string;
+    /** Placeholder of the country search box. Consumer-supplied. */
+    searchPlaceholder: string;
+    id?: string;
+    name?: string;
+    size?: FieldSize;
+    /**
+     * Applied to the surface of **both** controls, so the pair cannot drift apart visually —
+     * e.g. `'bg-white'` where the field sits on a tinted panel.
+     */
+    fieldClassName?: string;
+    helperTextClassName?: string;
+    className?: string;
+}
+/**
+ * @figmaNode y2whTsnmk1J2dy5fwbM7GK#8523-109515
+ * Figma "Phone number input": a country trigger (flag + code + chevron) and a separate number
+ * input side by side under one label, with a single helper row beneath the pair. The Figma
+ * **Property 1** variants (Default/Error/Disabled/Read-only/Menu) map to `error`/`disabled`/
+ * `readOnly` and the picker's own open state.
+ *
+ * Country data, grouping, validation and every user-facing string are supplied by the consumer —
+ * this component renders the state it is told about and owns no rules (ADR-0017 DEC-001/REQ-009).
+ * Pair it with `asma-core-helpers/phone`, which provides the country list, the formatter and the
+ * validator.
+ *
+ * ponytail: reformatting is applied on every keystroke, so the caret lands at the end of the
+ * number after an edit in the middle of it. Phone numbers are short and typed left to right, so
+ * this is a deliberate ceiling; the upgrade path is the caret-preserving `formatMaskedValue` in
+ * `helpers/inputMask.ts`, which today only handles fixed-width masks.
+ */
+export declare const StyledPhoneField: ({ dataTest, label, countries, country, onCountryChange, value, onChange, onBlur, error, helperText, reserveHelperText, disabled, readOnly, readOnlyText, readOnlyHref, required, placeholder, formatNationalNumber, renderFlag, selectCountryLabel, searchPlaceholder, id, name, size, fieldClassName, helperTextClassName, className, }: StyledPhoneFieldProps) => JSX.Element;

package/dist/src/components/inputs/phone-field/index.d.ts

@@ -0,0 +1,3 @@
+export * from './StyledPhoneField';
+export * from './StyledCountryFlag';
+export type { PhoneCountryChoice, RenderCountryFlag } from './types';

package/dist/src/components/inputs/phone-field/types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * One row of the country picker.
+ *
+ * Declared structurally rather than imported from `asma-core-helpers/phone` on purpose:
+ * this package is a kernel member served to the whole fleet, and pulling a phone-metadata
+ * dependency into it would put ~20 kB gz of country data in every app's shared bundle.
+ * `PhoneCountryOption` from that subpath satisfies this shape, so consumers pass it directly.
+ *
+ * @see asma-modules/_docs/adr/adr-g-0017-frontend-form-state-and-validation-ownership.md:49 — DEC-001, this library owns presentation only
+ */
+export interface PhoneCountryChoice {
+    /** ISO 3166-1 alpha-2 code, e.g. `'NO'`. */
+    iso2: string;
+    /** Calling code without the leading `+`, e.g. `'47'`. */
+    dialCode: string;
+    /** Country name, already localized by the consumer. */
+    name: string;
+}
+/**
+ * Renders the flag for a country. `loading` is `'eager'` where the flag is on screen the moment it
+ * mounts (the collapsed trigger, and the rows of an already-open picker) — see `StyledCountryFlag`.
+ */
+export type RenderCountryFlag = (iso2: string, loading?: 'eager' | 'lazy') => ReactNode;

package/dist/src/components/inputs/phone-field/useCountryPicker.d.ts

@@ -0,0 +1,30 @@
+import { KeyboardEvent } from 'react';
+import { PhoneCountryChoice } from './types';
+/**
+ * Matches on localized name **or** calling code, so both `"Norway"` and `"47"` narrow the list
+ * to +47 (ASMA-7485). A leading `+` is ignored so pasting `+47` works.
+ */
+export declare function matchesCountryQuery(country: PhoneCountryChoice, query: string): boolean;
+export interface UseCountryPickerOptions {
+    countries: readonly PhoneCountryChoice[];
+    selectedIso2: string;
+    query: string;
+    listId: string;
+    onSelect: (iso2: string) => void;
+    onDismiss: () => void;
+}
+export interface CountryPicker {
+    visible: readonly PhoneCountryChoice[];
+    activeIndex: number;
+    optionId: (index: number) => string;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Filtering, active-row tracking and keyboard behaviour for the country picker — shared by the
+ * desktop trigger (which is itself the combobox) and the mobile sheet (which has its own search
+ * box), so the two presentations cannot drift apart on what typing or arrowing does.
+ *
+ * The active row is tracked by country rather than by index: filtering renumbers every index, and
+ * an index would need an effect to stay in range — a re-render behind the list it describes.
+ */
+export declare function useCountryPicker({ countries, selectedIso2, query, listId, onSelect, onDismiss, }: UseCountryPickerOptions): CountryPicker;

package/dist/src/components/inputs/phone-field/useCountryPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/inputs/select/StyledSelectItem.d.ts

@@ -1,7 +1,8 @@
 import { MouseEvent, ReactNode } from 'react';
 export interface StyledSelectItemProps {
-    id?: string;
     value?: unknown;
+    /** Needed when a parent listbox points `aria-activedescendant` at this row. */
+    id?: string;
     children?: ReactNode;
     selected?: boolean;
     active?: boolean;

package/dist/src/index.d.ts

@@ -26,6 +26,7 @@ export * from './components/inputs/switch';
 export * from './components/inputs/radio-button';
 export * from './components/inputs/label';
 export * from './components/inputs/dynamic-select';
+export * from './components/inputs/phone-field';
 export * from './datetime/components/date-picker';
 export * from './datetime/components/time-picker';
 export * from './datetime/helpers/date.helper';