@ssa-ui-kit/core 3.25.1 → 3.26.1

package/dist/ai/source-map.md

@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
 
-193 components · 20 contexts · 23 hooks · 20 functions · 16 constants · 340 exported types
+194 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 346 exported types
 
 ## Reading this file
 
@@ -22,7 +22,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, Calendar, CalendarEventDetails, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnFreezeMenu, ColumnResizeHandle, Counter, FunnelChart, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellHeader, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableContainer, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
 
-**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
+**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Footer, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
 
 **Overlay & Feedback** — Modal, ModalContent, ModalDialog, ModalDismissButton, ModalOpenButton, NotificationCard, NotificationMenu, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger, ProgressChartTooltip, SimpleChartTooltip, Tooltip, TooltipContent, TooltipContentBase, TooltipTrigger
 
@@ -253,10 +253,11 @@ Select-like dropdown component for single selection
   - `maxHeight?: number` `= 200` — Max height (px) of the options list; overflow scrolls.
   - `avatarBorder?: boolean` `= false` — Shows a border around the avatar in the selected-item display.
   - `label?: string` — Label text displayed above the dropdown
+  - `labelBadge?: LabelBadge` — Status badge to the right of the label, e.g. `{ text: 'default', color: 'grey' }`. Announced as the toggle's…
   - `helperText?: string` — Helper text displayed below the dropdown Shown when no errors are present
   - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
   - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
-  - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Leading icon shown in the toggle button when no selected item avatar is present. Ignored once an item with an…
+  - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Leading icon shown in the toggle button when no selected item avatar is present. Ignored once an item with an…
   - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
   - `dropdownProps?: { base, toggleButton, toggleButtonArrow, dropdownPosition }` — Props object for sub-components Allows fine-grained control over component parts
 
@@ -319,7 +320,7 @@ Read-only row displaying a single attached/uploading file
   - `uploadingText?: string`
   - `uploadedText?: string`
   - `showDescription?: boolean`
-  - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")`
+  - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")`
   - `disabled?: boolean` — Mutes the attachment and disables the remove button.
   - `isDisabled?: boolean`
   - `onRemove?: () => void`
@@ -368,7 +369,7 @@ A button fixed to a corner of the viewport for the page's primary action, option
 #### IconButton
 Square icon-only button for icon actions
 
-  - `icon: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Icon name from the UI kit Icon component (e.g. "edit", "bin", "search")
+  - `icon: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Icon name from the UI kit Icon component (e.g. "edit", "bin", "search")
   - `onClick?: () => void` — Click handler. Optional — a `type="submit"` icon button inside a form needs no handler of its own.
   - `type?: 'button' | 'reset' | 'submit'` `= 'button'` — HTML button type attribute - `button`: Standard button (default) - `submit`: Form submission button -…
   - `size?: keyof MainSizes` `= 'small'` — Size of the button and its icon. Matches `Button`'s size scale so the two line up in a toolbar. - `small`:…
@@ -680,6 +681,7 @@ Multi-line text input component
   - `status?: 'custom' | 'error' | 'success' | 'basic'` `= 'basic'` — Visual validation status (aligns with Input/TextField palette behavior). - `basic`: default border/outline…
   - `title?: string` — Title attribute for the textarea element Provides tooltip text on hover
   - `id?: string` — HTML id attribute for the textarea (e.g. for label htmlFor). Defaults to `formElement-${name}` when not…
+  - `aria-describedby?: string` — Ids of the elements describing the textarea — a label badge, helper text
   - `onPaste?: ClipboardEventHandler<HTMLTextAreaElement>` — Paste event handler Fired when content is pasted into the textarea
   - `setCountChar?: ReactEventHandler` — Callback function to track character count Called with the event when content changes Useful for displaying…
 
@@ -687,6 +689,7 @@ Multi-line text input component
 Ready-to-use text input (single- or multi-line) with label and validation UI.
 
   - `label?: string` — Label text displayed above the input field
+  - `labelBadge?: LabelBadge` — Status badge to the right of the label, e.g. `{ text: 'mapped', color: 'primary' }`. Announced as the field's…
   - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
   - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
   - `helperText?: string` — Helper text displayed below the input Shown when no errors are present
@@ -736,6 +739,7 @@ Advanced autocomplete search component with dropdown functionality
   - `endIconClassName?: string` — Custom CSS class name for the end icon
   - `name?: string` `= 'typeahead-search'` — Form field name (required for React Hook Form integration)
   - `label?: string` — Label text displayed above the input
+  - `labelBadge?: LabelBadge` — Status badge to the right of the label, e.g. `{ text: 'mapped', color: 'primary' }`. Announced as the input's…
   - `helperText?: string` — Helper text displayed below the input
   - `error?: FieldError` — Field error from React Hook Form
   - `success?: boolean` `= false` — Whether to show success state
@@ -752,7 +756,7 @@ Advanced autocomplete search component with dropdown functionality
 
 #### TypeaheadItemIcon
 
-  - `name: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Which icon to render. Type-checked against the generated icon list, so a name that does not exist is a…
+  - `name: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Which icon to render. Type-checked against the generated icon list, so a name that does not exist is a…
   - `tooltip?: string` — Tooltip text shown on hover. Also becomes the icon's `aria-label`.
   - `size?: number` — Width and height in px. Icons are square, so one value sets both.
   - _plus native element attributes_
@@ -1102,16 +1106,17 @@ Compact component for tags, labels, and removable items.
   - `label: ReactNode` — Main text content of the chip Can be a string, number, or React node
   - `title?: ReactNode` — Optional title/heading text displayed before the label Useful for chips with additional context
   - `variant?: ChipVariant` `= 'filled'` — Visual style variant - `filled`: Solid background (default) - `outlined`: Transparent with border
-  - `color?: ChipColor` `= 'default'` — Color theme for the chip. Semantic colors read from `theme.palette`, so palette overrides in a custom theme…
+  - `color?: (string & {}) | 'black' | 'black25' | 'black45' | 'white' | 'white60' | …(139 more)` `= 'default'` — Color theme for the chip. Semantic colors read from `theme.palette`, so palette overrides in a custom theme…
   - `size?: ChipSize` `= 'medium'` — Size of the chip
   - `disabled?: boolean` `= false` — Whether the chip is disabled Disabled chips cannot be clicked or deleted
-  - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Icon name to display before the label Uses the Icon component internally Defaults to 'plus' if showIcon is…
+  - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Icon name to display before the label Uses the Icon component internally Defaults to 'plus' if showIcon is…
   - `avatar?: ReactNode` — Avatar component or image to display before the label Takes precedence over icon if both are provided
   - `onDelete?: MouseEventHandler<HTMLButtonElement>` — Delete button click handler When provided, a delete icon button appears on the chip Keyboard: Delete or…
-  - `deleteIcon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'cross'` — Custom icon name for the delete button
+  - `deleteIcon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` `= 'cross'` — Custom icon name for the delete button
   - `showIcon?: boolean` `= true` — Whether to show the leading icon If false, no icon will be displayed even if icon prop is provided
   - `onClick?: MouseEventHandler<HTMLDivElement>` — Click handler for the chip Makes the chip clickable/interactive
   - `clickable?: boolean` — Explicitly mark chip as clickable Used to enable pointer cursor and keyboard interaction Automatically true…
+  - `id?: string` — `id` of the chip element, e.g. for a control's `aria-describedby`
 
 #### ColumnFreezeMenu
 The freeze/unfreeze menu in a table header cell
@@ -1188,7 +1193,9 @@ Stage diagram drawn as a funnel or a triangle
 #### Label
 
   - `htmlFor?: string`
+  - `id?: string` — `id` of the `<label>` element, e.g. for a control's `aria-labelledby`
   - `children: ReactNode`
+  - `badge?: LabelBadge` — Status badge shown to the right of the label text
   - `disabled?: boolean` — Renders the label in its muted, disabled state.
   - `isDisabled?: boolean`
   - `onMouseEnter?: MouseEventHandler<HTMLLabelElement>`
@@ -1209,8 +1216,8 @@ Table whose rows collapse into expandable groups.
   - `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
   - `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
   - `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
-  - `collapsedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'carrot-up'` — Toggle icon shown while a group is collapsed.
-  - `expandedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'carrot-down'` — Toggle icon shown while a group is expanded.
+  - `collapsedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` `= 'carrot-up'` — Toggle icon shown while a group is collapsed.
+  - `expandedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` `= 'carrot-down'` — Toggle icon shown while a group is expanded.
   - `defaultCollapsed?: boolean` `= false` — Whether groups start collapsed. Applies to every group in the table; a single `WithNestedTableRow` can…
   - _plus native element attributes_
 
@@ -1586,6 +1593,18 @@ The app sidebar: a logo, a menu, and three layouts.
   _No library-specific props._
   - _plus native element attributes_
 
+#### Footer
+The page's bottom bar: a copyright line and legal links, and optionally a logo, a short description and navigation columns above them.
+
+  - `copyright?: ReactNode` — Copyright line, on the left of the bottom bar
+  - `links?: FooterLink[]` — Legal links — privacy policy, terms — on the right of the bottom bar
+  - `logo?: ReactNode` — Project logo, at the top left of the extended footer, in a 64px high box. Passing it makes the footer…
+  - `description?: ReactNode` — Short text under the logo — a tagline, the company name. Passing it makes the footer extended.
+  - `columns?: FooterColumn[]` — Navigation columns on the right of the extended footer. Passing any makes the footer extended.
+  - `size?: FooterSize` `= 'small'` — Text size and height of the bottom bar. Ignored by the extended footer, which the design only has in medium.
+  - `linksLabel?: string` `= 'Legal'` — Accessible name of the legal links' navigation landmark
+  - _plus native element attributes_
+
 #### Header
 The application's top bar: logo, main navigation and a free slot on the right for the user profile, notifications or log out.
 
@@ -1893,7 +1912,7 @@ Trigger element for popover
   - `caption: string`
   - `value: number`
   - `valueFormatted: string`
-  - `iconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")`
+  - `iconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")`
   - `barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>`
 
 #### SimpleChartTooltip<Series>
@@ -2052,7 +2071,7 @@ Default render function for accordion headers
 #### Icon
 Renders one of the kit's built-in SVG icons by name.
 
-  - `name: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Which icon to render. Type-checked against the generated icon list, so a name that does not exist is a…
+  - `name: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Which icon to render. Type-checked against the generated icon list, so a name that does not exist is a…
   - `tooltip?: string` — Tooltip text shown on hover. Also becomes the icon's `aria-label`.
   - `size?: number` — Width and height in px. Icons are square, so one value sets both.
   - _plus native element attributes_
@@ -2205,6 +2224,8 @@ Accessible label for form fields
 
   - `children: ReactNode` — Label text content
   - `htmlFor?: string`
+  - `id?: string` — `id` of the `<label>` element, e.g. for a control's `aria-labelledby`
+  - `badge?: LabelBadge` — Status badge shown to the right of the label text
   - `disabled?: boolean` — Renders the label in its muted, disabled state.
   - `isDisabled?: boolean`
   - `onMouseEnter?: MouseEventHandler<HTMLLabelElement>`
@@ -2351,6 +2372,7 @@ A sticky action bar across the bottom of the panel.
 - `deriveBreadcrumbs` — Pure derivation of breadcrumb items from a route tree and a pathname. Extracted from the hook so it can be unit-tested without a router.
 - `filterButtonStyles`
 - `getContextMenuOptionId` — DOM id of an option, for `aria-activedescendant` on an element outside the list (e.g. a combobox input). `menuId` is the `id` given to the ContextMenu. Characters not…
+- `getLabelBadgeId` — Builds the default badge id for a label's `htmlFor`, so a field can point its control's `aria-describedby` at the badge.
 - `getNextActiveValue` — Where a navigation key moves the highlight: ArrowDown / ArrowUp step over disabled options and wrap, Home / End jump to the ends. Returns `undefined` for any other key,…
 - `highlightInputMatch`
 - `nextIncludeExcludeType` — Where Enter moves an `includeExclude` row: none → include → exclude → none, or none ⇄ selected for `selectOnly` rows. For driving that cycle from an input that keeps…
@@ -2390,9 +2412,9 @@ A sticky action bar across the bottom of the panel.
 
 _Literal unions too long to inline above. A union shared by several props is listed once, under the prop it first appeared on._
 
-### Icon.name — 227 values
+### Icon.name — 241 values
 
-'reset' · 'archive' · 'arrow-down' · 'arrow-up' · 'clipboard-assessment' · 'attention' · 'award' · 'ban-user' · 'bench' · 'bin' · 'calendar' · 'calendar-schedule' · 'carrot-down' · 'carrot-left' · 'carrot-right' · 'carrot-up' · 'card-text' · 'case' · 'certification' · 'certification-expiring' · 'camera' · 'change' · 'chart' · 'check' · 'check-circle' · 'check-circle-inverted' · 'children' · 'circle' · 'circular' · 'clock' · 'cogwheel' · 'comments' · 'briefcase' · 'building' · 'compensation' · 'confirm-email' · 'contacts' · 'copy' · 'copy-link' · 'cross' · 'delete' · 'document' · 'diamond-ring' · 'diet' · 'documents' · 'edit' · 'education' · 'email' · 'employee' · 'employee-profile' · 'employee-terminated' · 'employee-blackboard' · 'excel-download' · 'export' · 'file-mark' · 'file-pdf' · 'file-word' · 'filter' · 'filter-funnel' · 'follow-link' · 'fte' · 'clipboard-form' · 'geography' · 'gender' · 'gift' · 'home' · 'import' · 'information' · 'inventory' · 'invisible' · 'language' · 'link' · 'lock' · 'log-in' · 'log-out' · 'maximize' · 'measurements' · 'message' · 'minus' · 'minus-circle' · 'minus-circle-inverted' · 'more' · 'more-vertical' · 'notification' · 'office-chair' · 'open-book' · 'pages' · 'party' · 'plus' · 'plus-circle' · 'plus-circle-inverted' · 'probation-period' · 'profiles-changes' · 'radio-on' · 'clipboard-report' · 'clipboard-result' · 'robot' · 'roles' · 'search' · 'seniority' · 'settings' · 'setting-clock' · 'signature' · 'sleep' · 'staff-growth-coefficient' · 'staff-turnover-coefficient' · 'stats' · 'clipboard-summary' · 'team' · 'clipboard-star' · 'time-tracking' · 'timeline' · 'tennis-ball' · 'trainings' · 'unarchive' · 'union' · 'union-circle' · 'unlock' · 'url' · 'user' · 'visible' · 'warning' · 'panelLeft' · 'panelRight' · 'emailOutlined' · 'lockOutlined' · 'addFolder' · 'moveFolder' · 'attention-circle' · 'zoom' · 'zoom-in' · 'zoom-out' · 'pan' · 'box-select' · 'lasso-select' · 'autoscale' · 'reset-axes' · 'star' · 'preview' · 'dashboard' · 'phone' · 'tablet' · 'desktop' · 'more-info' · 'filter-list' · 'history' · 'overtime' · 'save-2' · 'folder' · 'salary-reports' · 'assessment-stages' · 'comments-on-achievements' · 'code-review-comments' · 'support' · 'leave' · 'vacation' · 'sick-leave' · 'day-off' · 'arrow-sort' · 'menu' · 'dragndrop' · 'send' · 'save' · 'today' · 'busket' · 'copy-link-2' · 'upload' · 'picture' · 'warning-2' · 'info' · 'sort-up' · 'sort-down' · 'bold' · 'italic' · 'strikethrough' · 'underline' · 'h1' · 'h2' · 'h3' · 'markup' · 'numbered-list' · 'bulleted-list' · 'uppercase' · 'dash' · 'brackets' · 'undo' · 'redo' · 'new-line' · 'quotation' · 'close-circle-outline' · 'close-square-outline' · 'close-circle-filled' · 'close-square-filled' · 'plus-square-outline' · 'plus-square-filled' · 'minus-square-outline' · 'minus-square-filled' · 'tick-square-outline' · 'tick-square-filled' · 'warning-circle-outline' · 'warning-square-outline' · 'warning-circle-filled' · 'warning-square-filled' · 'info-square-outline' · 'info-square-filled' · 'info-circle-filled' · 'more-circle-outline' · 'more-square-outline' · 'more-circle-filled' · 'more-square-filled' · 'client-feedback' · 'expertise' · 'responsibilities' · 'mobile' · 'delivery-address' · 'delivery-address-2' · 'pdp' · 'versions' · 'experience' · 'projects' · 'cooperation-model' · 'billable' · 'non-billable' · 'recruitment-team' · 'clear' · 'list' · 'columns'
+'reset' · 'archive' · 'arrow-down' · 'arrow-up' · 'clipboard-assessment' · 'attention' · 'award' · 'ban-user' · 'bench' · 'bin' · 'calendar' · 'calendar-schedule' · 'carrot-down' · 'carrot-left' · 'carrot-right' · 'carrot-up' · 'card-text' · 'case' · 'certification' · 'certification-expiring' · 'camera' · 'change' · 'chart' · 'check' · 'check-circle' · 'check-circle-inverted' · 'children' · 'circle' · 'circular' · 'clock' · 'cogwheel' · 'comments' · 'briefcase' · 'building' · 'compensation' · 'confirm-email' · 'contacts' · 'copy' · 'copy-link' · 'cross' · 'delete' · 'document' · 'diamond-ring' · 'diet' · 'documents' · 'edit' · 'education' · 'email' · 'employee' · 'employee-profile' · 'employee-terminated' · 'employee-blackboard' · 'excel-download' · 'export' · 'file-mark' · 'file-pdf' · 'file-word' · 'filter' · 'filter-funnel' · 'follow-link' · 'fte' · 'clipboard-form' · 'geography' · 'gender' · 'gift' · 'home' · 'import' · 'information' · 'inventory' · 'invisible' · 'language' · 'link' · 'lock' · 'log-in' · 'log-out' · 'maximize' · 'measurements' · 'message' · 'minus' · 'minus-circle' · 'minus-circle-inverted' · 'more' · 'more-vertical' · 'notification' · 'office-chair' · 'open-book' · 'pages' · 'party' · 'plus' · 'plus-circle' · 'plus-circle-inverted' · 'probation-period' · 'profiles-changes' · 'radio-on' · 'clipboard-report' · 'clipboard-result' · 'robot' · 'roles' · 'search' · 'seniority' · 'settings' · 'setting-clock' · 'signature' · 'sleep' · 'staff-growth-coefficient' · 'staff-turnover-coefficient' · 'stats' · 'clipboard-summary' · 'team' · 'clipboard-star' · 'time-tracking' · 'timeline' · 'tennis-ball' · 'trainings' · 'unarchive' · 'union' · 'union-circle' · 'unlock' · 'url' · 'user' · 'visible' · 'warning' · 'panelLeft' · 'panelRight' · 'emailOutlined' · 'lockOutlined' · 'addFolder' · 'moveFolder' · 'attention-circle' · 'zoom' · 'zoom-in' · 'zoom-out' · 'pan' · 'box-select' · 'lasso-select' · 'autoscale' · 'reset-axes' · 'star' · 'preview' · 'dashboard' · 'phone' · 'tablet' · 'desktop' · 'more-info' · 'filter-list' · 'history' · 'overtime' · 'save-2' · 'folder' · 'salary-reports' · 'assessment-stages' · 'comments-on-achievements' · 'code-review-comments' · 'support' · 'leave' · 'vacation' · 'sick-leave' · 'day-off' · 'arrow-sort' · 'menu' · 'dragndrop' · 'send' · 'save' · 'today' · 'busket' · 'copy-link-2' · 'upload' · 'picture' · 'warning-2' · 'info' · 'sort-up' · 'sort-down' · 'bold' · 'italic' · 'strikethrough' · 'underline' · 'h1' · 'h2' · 'h3' · 'markup' · 'numbered-list' · 'bulleted-list' · 'uppercase' · 'dash' · 'brackets' · 'undo' · 'redo' · 'new-line' · 'quotation' · 'close-circle-outline' · 'close-square-outline' · 'close-circle-filled' · 'close-square-filled' · 'plus-square-outline' · 'plus-square-filled' · 'minus-square-outline' · 'minus-square-filled' · 'tick-square-outline' · 'tick-square-filled' · 'warning-circle-outline' · 'warning-square-outline' · 'warning-circle-filled' · 'warning-square-filled' · 'info-square-outline' · 'info-square-filled' · 'info-circle-filled' · 'more-circle-outline' · 'more-square-outline' · 'more-circle-filled' · 'more-square-filled' · 'client-feedback' · 'expertise' · 'responsibilities' · 'mobile' · 'delivery-address' · 'delivery-address-2' · 'pdp' · 'versions' · 'experience' · 'projects' · 'cooperation-model' · 'billable' · 'non-billable' · 'recruitment-team' · 'clear' · 'list' · 'columns' · 'womens-day' · 'womens-day-2' · 'easter' · 'halloween' · 'christmas-hat' · 'christmas-stocking' · 'christmas-tree' · 'constitution-day' · 'labour-day' · 'religious-holidays' · 'peace-day' · 'memorial-day' · 'army-holidays' · 'kings-day'
 
 ## Exported types
 
@@ -2438,13 +2460,14 @@ _Names only — read the `.d.ts` for their shape._
 `FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
 `FiltersMultiSelectProps` · `FloatingActionButtonAction` · `FloatingActionButtonColor`
 `FloatingActionButtonIcon` · `FloatingActionButtonPosition` · `FloatingActionButtonProps`
-`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
-`FrozenColumns` · `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps`
-`FunnelChartRender` · `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold`
-`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps`
-`HeaderSize` · `HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps`
-`IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
-`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelProps` · `LargeTabProps`
+`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `FooterColumn`
+`FooterLink` · `FooterProps` · `FooterSize` · `FooterTheme` · `Format` · `FrozenColumns`
+`FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps` · `FunnelChartRender`
+`FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold` · `GaugeBarValueFormatter`
+`GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps` · `HeaderSize`
+`HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps` · `IconButtonProps`
+`IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
+`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelBadge` · `LabelProps` · `LargeTabProps`
 `LastFocusedElement` · `LinkProps` · `LinksTabBarProps` · `MainColors` · `MainSizes`
 `MapIconsType` · `ModalContextProps` · `ModalDialogProps` · `ModalProps` · `ModalRootProps`
 `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup` · `NavBarExtendedItem`

package/dist/components/Chip/helpers.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@emotion/react';
-import { ChipProps } from './types';
-type SemanticColor = Exclude<ChipProps['color'], 'default' | undefined>;
+import { ChipColor, ChipProps } from './types';
+type SemanticColor = Exclude<ChipColor, 'default'>;
 type ColorConfig = {
     /** Solid background for filled variant / border + text for outlined */
     main: string;

package/dist/components/Chip/types.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../types/emotion';
+import { ColorsKeys, CommonProps } from '../../types/emotion';
 import { Interpolation, Theme } from '@emotion/react';
 import { ReactNode, MouseEventHandler } from 'react';
 import { IconProps } from '../Icon/types';
@@ -90,10 +90,13 @@ export interface ChipProps extends CommonProps {
     variant?: ChipVariant;
     /**
      * Color theme for the chip. Semantic colors read from `theme.palette`,
-     * so palette overrides in a custom theme apply automatically.
+     * so palette overrides in a custom theme apply automatically. Any other
+     * theme color key (e.g. `'purple'`) or CSS color (e.g. `'#ff8a00'`) is
+     * used as is: border and text in `outlined`, background in `filled`, with
+     * the text color picked for contrast.
      * @default 'default'
      */
-    color?: ChipColor;
+    color?: ChipColor | ColorsKeys | (string & {});
     /**
      * Size of the chip
      * @default 'medium'
@@ -148,4 +151,8 @@ export interface ChipProps extends CommonProps {
      * Custom Emotion CSS styles
      */
     css?: Interpolation<Theme>;
+    /**
+     * `id` of the chip element, e.g. for a control's `aria-describedby`
+     */
+    id?: string;
 }

package/dist/components/Dropdown/Dropdown.d.ts

@@ -94,5 +94,5 @@ import { DropdownProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  */
-declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, helperText, errors, success, icon, width, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, labelBadge, helperText, errors, success, icon, width, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/components/Dropdown/types.d.ts

@@ -4,6 +4,7 @@ import { Interpolation, Theme } from '@emotion/react';
 import { DropdownOptionProps } from '../DropdownOptions';
 import { CommonProps } from '../../types/emotion';
 import { IconProps } from '../Icon/types';
+import { LabelBadge } from '../Label/types';
 export declare enum DropdownPositions {
     top = "top",
     bottom = "bottom",
@@ -108,6 +109,12 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
      * Label text displayed above the dropdown
      */
     label?: string;
+    /**
+     * Status badge to the right of the label, e.g.
+     * `{ text: 'default', color: 'grey' }`. Announced as the toggle's
+     * description. Needs a `label`.
+     */
+    labelBadge?: LabelBadge;
     /**
      * Helper text displayed below the dropdown
      * Shown when no errors are present

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,42 @@
+import { FooterProps } from './types';
+/**
+ * Footer - The page's bottom bar: a copyright line and legal links, and
+ * optionally a logo, a short description and navigation columns above them.
+ *
+ * ### Default and extended
+ * With only `copyright` and `links` the Footer is a single bar in one of
+ * three sizes. Passing `logo`, `description` or `columns` makes it extended:
+ * the brand block and columns sit above the same bar. The design has the
+ * extended footer in medium only, so it ignores `size`.
+ *
+ * ### Links
+ * A link with a `path` renders as a react-router link, so the Footer must
+ * then sit inside a router; a link with an `href` renders as a plain anchor.
+ * Each column is its own navigation landmark, named by its title.
+ *
+ * ### Layout
+ * The layout follows the Footer's own width, not the window's. Below 900px
+ * the bottom bar stacks the copyright over the links, and the extended
+ * footer puts the brand block above its columns, two per row.
+ *
+ * @category Navigation
+ * @example
+ * ```tsx
+ * <Footer
+ *   copyright="Acme © 2007-2026. All rights reserved."
+ *   links={[
+ *     { id: 'privacy', label: 'Privacy Policy', path: '/privacy' },
+ *     { id: 'terms', label: 'Terms & Conditions', path: '/terms' },
+ *   ]}
+ *   logo={<img src="/logo.svg" alt="Acme" height={64} />}
+ *   columns={[
+ *     {
+ *       id: 'company',
+ *       title: 'Company',
+ *       links: [{ id: 'about', label: 'About us', path: '/about' }],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Footer/index.d.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/dist/components/Footer/styles.d.ts

@@ -0,0 +1,53 @@
+import { Theme } from '@emotion/react';
+import { FooterSize, FooterTheme } from './types';
+export declare const TYPOGRAPHY: Record<FooterSize, {
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: number;
+}>;
+/** From this footer width up the design layout; below it, everything stacks. */
+export declare const DESKTOP_MIN_WIDTH = 900;
+export declare const resolvePalette: (theme: Theme, footerTheme: FooterTheme) => {
+    background: string;
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | undefined;
+} | {
+    background: `rgb${string}` | "transparent";
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | "transparent";
+};
+export type FooterPalette = ReturnType<typeof resolvePalette>;
+/**
+ * The query container. It is the footer itself, so consumer styles land on
+ * the outermost element; the padding the query switches lives on the inner
+ * wrapper, as a container cannot query its own width. The kit's global reset
+ * gives every element its own color, hence the explicit inherit inside.
+ */
+export declare const container: (palette: FooterPalette) => import("@emotion/react").SerializedStyles;
+export declare const inner: import("@emotion/react").SerializedStyles;
+/**
+ * Design: 24px above the content, 40px between it and the bottom bar. The
+ * container already pads 12px, so this adds the other 12px on top.
+ */
+export declare const extended: import("@emotion/react").SerializedStyles;
+export declare const content: import("@emotion/react").SerializedStyles;
+export declare const brand: import("@emotion/react").SerializedStyles;
+/**
+ * Fixed height, as in the design's placeholder; width follows the logo so
+ * wordmarks fit.
+ */
+export declare const logo: import("@emotion/react").SerializedStyles;
+export declare const description: import("@emotion/react").SerializedStyles;
+/**
+ * Two columns side by side on phones. On desktop the design's 160px gaps,
+ * shrinking with the footer so a fourth column still fits.
+ */
+export declare const columns: import("@emotion/react").SerializedStyles;
+export declare const column: import("@emotion/react").SerializedStyles;
+export declare const columnTitle: import("@emotion/react").SerializedStyles;
+export declare const linkList: import("@emotion/react").SerializedStyles;
+/** Stacked on phones; copyright left and links right from 900px. */
+export declare const bottomBar: (size: FooterSize) => import("@emotion/react").SerializedStyles;
+export declare const copyright: import("@emotion/react").SerializedStyles;
+export declare const legalList: import("@emotion/react").SerializedStyles;
+export declare const link: (theme: Theme, palette: FooterPalette) => import("@emotion/react").SerializedStyles;

package/dist/components/Footer/types.d.ts

@@ -0,0 +1,110 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Footer size: the text size of the bottom bar — 14px, 16px or 20px — and so
+ * its height, 42px, 48px or 52px. The extended footer is always medium.
+ */
+export type FooterSize = 'small' | 'medium' | 'large';
+/**
+ * Footer color scheme: the light grey bar, or the dark graphite gradient the
+ * Header uses.
+ */
+export type FooterTheme = 'light' | 'dark';
+/**
+ * One link of the Footer — a legal link in the bottom bar, or a line of a
+ * navigation column.
+ *
+ * Give it a `path` to render a react-router link (the Footer must then sit
+ * inside a router), or an `href` for a plain anchor — a page on another site,
+ * a `mailto:`. With neither it renders as plain text.
+ *
+ * @example
+ * ```tsx
+ * const links: FooterLink[] = [
+ *   { id: 'privacy', label: 'Privacy Policy', path: '/privacy' },
+ *   { id: 'terms', label: 'Terms & Conditions', href: 'https://example.com/terms' },
+ * ];
+ * ```
+ */
+export interface FooterLink {
+    /** Unique key of the link within its list */
+    id: string;
+    /** Visible label */
+    label: ReactNode;
+    /** In-app route, rendered as a react-router link. Wins over `href`. */
+    path?: string;
+    /** Address of a plain anchor, for links outside the app */
+    href?: string;
+}
+/**
+ * A navigation column of the extended Footer: a bold title over a list of
+ * links.
+ *
+ * @example
+ * ```tsx
+ * const column: FooterColumn = {
+ *   id: 'company',
+ *   title: 'Company',
+ *   links: [
+ *     { id: 'about', label: 'About us', path: '/about' },
+ *     { id: 'careers', label: 'Careers', path: '/careers' },
+ *   ],
+ * };
+ * ```
+ */
+export interface FooterColumn {
+    /** Unique key of the column */
+    id: string;
+    /** Column title; also names the column's navigation landmark */
+    title: ReactNode;
+    /** Links listed under the title */
+    links: FooterLink[];
+}
+/**
+ * Props for the Footer component.
+ *
+ * @example
+ * ```tsx
+ * <Footer
+ *   copyright="Acme © 2007-2026. All rights reserved."
+ *   links={[{ id: 'privacy', label: 'Privacy Policy', path: '/privacy' }]}
+ * />
+ * ```
+ */
+export interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Copyright line, on the left of the bottom bar */
+    copyright?: ReactNode;
+    /** Legal links — privacy policy, terms — on the right of the bottom bar */
+    links?: FooterLink[];
+    /**
+     * Project logo, at the top left of the extended footer, in a 64px high box.
+     * Passing it makes the footer extended.
+     */
+    logo?: ReactNode;
+    /**
+     * Short text under the logo — a tagline, the company name. Passing it makes
+     * the footer extended.
+     */
+    description?: ReactNode;
+    /**
+     * Navigation columns on the right of the extended footer. Passing any makes
+     * the footer extended.
+     */
+    columns?: FooterColumn[];
+    /**
+     * Color scheme. Named after the kit's other light/dark components (Header,
+     * TreeView) — not the Emotion theme.
+     * @default 'light'
+     */
+    theme?: FooterTheme;
+    /**
+     * Text size and height of the bottom bar. Ignored by the extended footer,
+     * which the design only has in medium.
+     * @default 'small'
+     */
+    size?: FooterSize;
+    /**
+     * Accessible name of the legal links' navigation landmark
+     * @default 'Legal'
+     */
+    linksLabel?: string;
+}

package/dist/components/Icon/icons/ArmyHolidays.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const ArmyHolidays: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "army-holidays";

package/dist/components/Icon/icons/ChristmasHat.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const ChristmasHat: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "christmas-hat";

package/dist/components/Icon/icons/ChristmasStocking.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const ChristmasStocking: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "christmas-stocking";

package/dist/components/Icon/icons/ChristmasTree.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const ChristmasTree: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "christmas-tree";

package/dist/components/Icon/icons/ConstitutionDay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const ConstitutionDay: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "constitution-day";

package/dist/components/Icon/icons/Easter.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Easter: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "easter";

package/dist/components/Icon/icons/Halloween.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Halloween: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "halloween";

package/dist/components/Icon/icons/KingsDay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const KingsDay: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "kings-day";

package/dist/components/Icon/icons/LabourDay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const LabourDay: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "labour-day";

package/dist/components/Icon/icons/MemorialDay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const MemorialDay: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "memorial-day";

package/dist/components/Icon/icons/PeaceDay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const PeaceDay: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "peace-day";

package/dist/components/Icon/icons/ReligiousHolidays.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const ReligiousHolidays: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "religious-holidays";

package/dist/components/Icon/icons/WomensDay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const WomensDay: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "womens-day";

package/dist/components/Icon/icons/WomensDay2.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const WomensDay2: ({ fill, size, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "womens-day-2";

package/dist/components/Icon/icons/all.d.ts

@@ -225,3 +225,17 @@ export * as RecruitmentTeam from './RecruitmentTeam';
 export * as Clear from './Clear';
 export * as List from './List';
 export * as Columns from './Columns';
+export * as WomensDay from './WomensDay';
+export * as WomensDay2 from './WomensDay2';
+export * as Easter from './Easter';
+export * as Halloween from './Halloween';
+export * as ChristmasHat from './ChristmasHat';
+export * as ChristmasStocking from './ChristmasStocking';
+export * as ChristmasTree from './ChristmasTree';
+export * as ConstitutionDay from './ConstitutionDay';
+export * as LabourDay from './LabourDay';
+export * as ReligiousHolidays from './ReligiousHolidays';
+export * as PeaceDay from './PeaceDay';
+export * as MemorialDay from './MemorialDay';
+export * as ArmyHolidays from './ArmyHolidays';
+export * as KingsDay from './KingsDay';