@olundot/ui 0.22.0 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @olundot/ui
 
+## 0.23.1
+
+### Patch Changes
+
+- e2448e1: `BulkActionBar`의 작업 줄이 맨 앞 작업만 남겨도 카드에 들어가지 않을 때, 이동 버튼이 보이면 키 표시를 먼저 숨긴다. 그래도 넘치면 맨 앞 작업도 더보기 메뉴로 옮긴다. 375px 폭에서 이동 버튼이 카드 왼쪽 밖으로 나가던 문제를 고친다. 키 표시를 숨겨도 라벨, 접근 이름, `aria-keyshortcuts`는 그대로다. 이동 버튼이 보이지 않을 때는 기존처럼 맨 앞 작업 하나를 남긴다.
+
+## 0.23.0
+
+### Minor Changes
+
+- 6e233de: `DatePicker` 추가: 달력에서 날짜 하나나 기간을 고른다. `selectionMode`(`single`·`range`)와 `granularity`(`day` = `YYYY-MM-DD`, `minute` = `YYYY-MM-DDTHH:mm`)로 고르고, 기간 값은 `{ from, to }`(`DateRangeValue`)다. 두 끝이 차면 바로 반영하고 확인 단추는 없다. 시간 포함이면 시·분 열 목록을 1024px 이상 팝오버(424px)에서는 달력 오른쪽, 1024px 미만 아래쪽 시트에서는 달력 아래에 둔다. 분 간격 `minuteStep`(기본 5), 간격 밖 기존 분은 열에 끼워 보인다. `min`·`max` 밖은 비활성이고 넘으면 끝으로 당긴다. 라벨 계약은 Select와 같다(`label`, `labelPlacement` 기본 `top`, `description`, `message`, `invalid`, `size`, `fullWidth`). 달력은 APG 날짜 격자 키보드, 시·분 열은 `listbox` 키보드를 따른다. `maxDays`, `displayValue`, `popoverHeader`, `initialMonth`를 받는다.
+- 9362060: `Alert`와 `InlineAlert`의 `role`을 `variant`로 정한다. `error`는 `role="alert"`와 `aria-live="assertive"`, 나머지는 `role="status"`와 `aria-live="polite"`다. `info`·`success`·`warning` Alert의 `role`이 `alert`에서 `status`로, `error` InlineAlert의 `role`이 `status`에서 `alert`로 바뀐다. 소비자가 넘긴 `role`과 `aria-live`가 우선한다.
+- f7c737a: `RadioGroup`에 `marker?: "none" | "number"`가 생긴다(기본 `"none"`). `"number"`면 라디오 원 자리에 1부터 센 22px 번호 원을 그리고, 고르면 `--primary`로 채운다. 번호는 렌더할 때 정한다. 그룹이 자식 가운데 `Radio`를 Fragment와 DOM 요소(`div` 등) 안까지 순서대로 세고, 컴포넌트 안에서 그리는 `Radio`는 새 `number` prop으로 번호를 받는다(`number`가 이긴다). 세지도 못하고 `number`도 없는 `Radio`는 번호 없이 그리고 개발 모드에서 한 번 경고한다. 서버 렌더와 하이드레이션 뒤 번호가 같다. 화면 번호는 `aria-hidden`이고 접근 이름 앞에 숨긴 `{n}번 `이 붙는다. 번호 원은 라벨 첫 줄에 맞춘다. 앱에서 `[data-slot=radio-control]`을 숨기고 번호를 직접 그리던 우회를 이 옵션으로 바꿀 수 있다. 새 타입 `RadioGroupMarker`를 내보낸다.
+- 0634104: `TablePagination`에 번호 모드가 생긴다. `page`(1부터)와 `onPageChange`를 주면 ◀ ▶ 대신 `« ‹ 1 2 3 … › »`를 그린다. 페이지 수와 범위는 `total`·`pageSize`로 계산하므로 `rangeStart`·`rangeEnd`·`hasPrev`·`hasNext`·`onPrev`·`onNext`는 넘기지 않는다(타입이 막는다). 번호 모드 props 타입은 새 `TablePaginationPagesProps`이고, 기존 `TablePaginationProps`는 ◀ ▶ 모드 계약 그대로라 이를 받아 펼치는 래퍼는 바꿀 필요가 없다.
+
+  - 넓은 패널: 행 수 선택 | 버튼 묶음 | 범위의 3칸 격자(`1fr auto 1fr`). 버튼 묶음이 패널 가운데에 고정되고 쪽을 넘겨도 움직이지 않는다. 번호는 `Pagination`과 같은 7칸.
+  - 패널 안쪽 폭 800px 미만: 두 줄(행 수·범위 / 가운데 버튼)과 번호 5칸(`1 2 3 … 끝`, `1 … 끝-2 끝-1 끝`, `1 … 현재 … 끝`). 안쪽 320px 미만(320 화면)에서는 «·»를 숨겨 버튼 7개(248px)로 들어간다. 1과 끝 쪽 번호는 남는다. CSS 컨테이너 쿼리로 바꾸고, 쓰지 않는 칸 수의 번호 줄은 `display: none`이라 접근성 트리와 Tab 순서에서 빠진다.
+  - `loading` 동안 번호 버튼까지 모든 버튼이 `disabled`다. `nav`는 바깥 하나뿐이고 현재 쪽에 `aria-current="page"`가 붙는다.
+  - ◀ ▶ 모드 렌더와 `shouldHideTablePagination`은 그대로다. `Pagination`의 번호 계산·버튼을 공유하며 `Pagination` 렌더 결과는 같다.
+
+### Patch Changes
+
+- 9362060: `BulkActionBar`가 토스트를 피하는 높이를 고정값 204px 대신 떠 있는 토스트 묶음의 실제 높이로 정한다. 두 줄 토스트가 쌓이면 카드가 가려지지 않고, 토스트가 하나뿐이면 카드가 필요 이상 올라가지 않는다. 토스트가 없으면 204px 그대로이고 `--olun-bulk-bar-offset` 계약은 같다. `ToastViewport`는 묶음 높이나 개수가 바뀌면 window에 `olun-toast-stack` 이벤트를 보낸다.
+- f7c737a: `FormField` 함수 자식의 `controlProps`를 펼쳐도 `description`·`message`·`state`가 DOM 속성으로 새지 않는다. `Checkbox`·`Switch`·`OTPField`·`FileUploadZone`은 `description`을 안내 칸에, `message`(`state="error"`)를 오류 칸에 그리고 `aria-describedby`·`aria-invalid`로 잇는다(`OTPField`는 `helperText`·`errorText`, `FileUploadZone`은 `hint`·`error` 칸이며 직접 준 값이 이긴다). `RadioGroup`·`CheckboxGroup`·`ModeToggle`은 세 값을 걸러내며, 안내와 오류는 `FormField` 요소 자식으로 쓸 때 보인다.
+- f7c737a: `Input`이 늘 같은 구조로 그린다. 래퍼 `data-slot="input-field"`가 늘 있고, `label`·`description`·`message`가 모두 없으면 `display: contents`라 배치와 높이는 맨 `<input>`과 같다. 오류가 생기고 사라져도 같은 `<input>` 노드가 남아 포커스와 입력 위치가 유지된다. `className`은 그대로 `<input>`에 붙는다. 맨 `Input`의 마크업 첫 요소가 `<input>`이 아니라 래퍼 `<div>`로 바뀐다.
+
 ## 0.22.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -66,7 +66,7 @@ type GhostDefaultActionStyle = {
 declare const buttonCva: (props?: ({
     appearance?: "filled" | "outline" | "ghost" | "link" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | null | undefined;
+    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
@@ -101,13 +101,13 @@ type CopyButtonProps = Omit<ButtonProps, 'appearance' | 'children' | 'loading' |
 declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -155,11 +155,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -203,12 +203,12 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -257,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -354,6 +354,71 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 
+type DatePickerGranularity = "day" | "minute";
+interface DateRangeValue {
+    from: string;
+    to: string;
+}
+
+type DatePickerSize = SelectSize;
+interface DatePickerBaseProps {
+    /** Value format and whether a time is picked. `day` = `"YYYY-MM-DD"`, `minute` = `"YYYY-MM-DDTHH:mm"`. Default `"day"`. */
+    granularity?: DatePickerGranularity;
+    /** Minute column step. A stored minute off the step stays in the column. Default 5. */
+    minuteStep?: number;
+    /** Earliest pickable value, in the value format. Earlier dates, hours and minutes are disabled. */
+    min?: string;
+    /** Latest pickable value, in the value format. */
+    max?: string;
+    /** Month the calendar opens on while the value is empty, in the value format. */
+    initialMonth?: string;
+    label?: React.ReactNode;
+    /** Label above the field (default) or inside it before the value, as `라벨: 값`. Same as Select. */
+    labelPlacement?: "top" | "inline";
+    /** Hint under the field. Hidden while `invalid`; `message` takes its place. */
+    description?: React.ReactNode;
+    message?: React.ReactNode;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Empty field text. Default `날짜 선택` (`day`) or `일시 선택` (`minute`). */
+    placeholder?: string;
+    /** Field height: sm 30 · md 32 · lg 36. Default `"md"`. */
+    size?: DatePickerSize;
+    /** Stretch to the container (default) or fit the content. */
+    fullWidth?: boolean;
+    /** Summary text the caller formats (an organization time zone, for example). Shown while a value is set. */
+    displayValue?: string;
+    /** Slot at the top of the popover and the sheet. */
+    popoverHeader?: React.ReactNode;
+    /** Field button id. */
+    id?: string;
+    /** Classes on the field button. */
+    className?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    selectionMode?: "single";
+    /** `""` or a value in the `granularity` format. */
+    value: string;
+    onChange: (value: string) => void;
+    maxDays?: never;
+}
+interface DatePickerRangeProps extends DatePickerBaseProps {
+    selectionMode: "range";
+    /** Both `""` when empty. */
+    value: DateRangeValue;
+    /** Called once both ends are set, then on every change. */
+    onChange: (value: DateRangeValue) => void;
+    /** Most days the range spans, the start day included. */
+    maxDays?: number;
+}
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+
 declare const formFieldVariants: (props?: ({
     layout?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1331,7 +1396,8 @@ interface BulkActionBarProps extends BulkActionBarBaseProps {
  * with the clear (✕) button on its right, `summary` under it at full width, then
  * one line of outline sm Buttons: the move button back to the list at the left (shown
  * only while keyboard focus is in the card), the actions at the right. A line that does
- * not fit folds actions into a ⋯ menu from the end. `variant: "destructive"` is outline danger. The card is
+ * not fit folds actions into a ⋯ menu from the end, then hides the move button's key caps, then
+ * folds the first action too. `variant: "destructive"` is outline danger. The card is
  * min(360px, its slot − 32px) wide; while it is near the viewport bottom the document root
  * carries `--olun-bulk-bar-offset` (viewport bottom → card top) for toasts to clear it.
  * The card is a named region around a toolbar; DOM order is count → move → actions → ⋯ → ✕.
@@ -1708,7 +1774,7 @@ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
 declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1721,13 +1787,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1741,7 +1807,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1753,7 +1819,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1779,7 +1845,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1799,7 +1865,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1832,7 +1898,7 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
@@ -1841,7 +1907,7 @@ type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
 type IconButtonVariantsOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
 declare function iconButtonVariants(options?: IconButtonVariantsOptions): string;
 declare const iconButtonBadgeVariants: (props?: ({
-    tone?: "error" | "info" | "success" | null | undefined;
+    tone?: "error" | "success" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconButtonBadgeTone = NonNullable<VariantProps<typeof iconButtonBadgeVariants>["tone"]>;
 type IconButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement> & {
@@ -1992,27 +2058,48 @@ interface PageSizeSelectProps {
 declare function PageSizeSelect({ value, onChange, options, label, unit, size, disabled, id, 'aria-label': ariaLabel, className, }: PageSizeSelectProps): react_jsx_runtime.JSX.Element;
 
 declare const TABLE_PAGE_SIZE_OPTIONS: readonly [20, 50, 100];
-interface TablePaginationProps {
+interface TablePaginationBaseProps {
     pageSize: number;
     /** The caller sends the list back to the first page when the page size changes. */
     onPageSizeChange: (pageSize: number) => void;
     /** Default `TABLE_PAGE_SIZE_OPTIONS` (20, 50, 100). */
     pageSizeOptions?: readonly number[];
+    /** Unit after the total — `명` for people. Default `개`. */
+    unit?: string;
+    /** While the next page loads, every page button is disabled. */
+    loading?: boolean;
+    'aria-label'?: string;
+}
+interface TablePaginationProps extends TablePaginationBaseProps {
     /** First row number on this page, from 1. 0 when there are no rows. */
     rangeStart: number;
     /** Last row number on this page. */
     rangeEnd: number;
     /** Total count. Leave it out when the API has none: only the range shows. */
     total?: number;
-    /** Unit after the total — `명` for people. Default `개`. */
-    unit?: string;
     hasPrev: boolean;
     hasNext: boolean;
     onPrev: () => void;
     onNext: () => void;
-    /** While the next page loads, ◀ ▶ are disabled. */
-    loading?: boolean;
-    'aria-label'?: string;
+    page?: never;
+    onPageChange?: never;
+}
+interface TablePaginationPagesProps extends TablePaginationBaseProps {
+    /**
+     * Numbered mode: current page, from 1. With `onPageChange` it draws `« ‹ 1 2 3 … › »`
+     * instead of ◀ ▶. The page count and the range come from `total` and `pageSize`.
+     */
+    page: number;
+    /** Called with the page to show, from 1. */
+    onPageChange: (page: number) => void;
+    /** Total count. Numbered mode needs it for the page count. */
+    total: number;
+    rangeStart?: never;
+    rangeEnd?: never;
+    hasPrev?: never;
+    hasNext?: never;
+    onPrev?: never;
+    onNext?: never;
 }
 type TablePaginationVisibility = Pick<TablePaginationProps, 'rangeEnd' | 'total' | 'hasPrev' | 'hasNext' | 'pageSizeOptions'>;
 /**
@@ -2025,8 +2112,13 @@ declare function shouldHideTablePagination({ rangeEnd, total, hasPrev, hasNext,
  * and ◀ ▶ on the right. Put it in `DataTable`'s `footer`, which draws the line above it.
  * Below 1024px the `페이지당` label hides (the select keeps its name), and below 400px of
  * panel width the total hides. Both are CSS, so nothing flashes on hydration or paging.
+ *
+ * With `page` and `onPageChange` it is numbered: page size, then `« ‹ 1 2 3 … › »` in the
+ * middle of the panel, then the range on the right. Below 800px of panel width it wraps to
+ * two lines (page size and range, then the buttons) and the numbers drop to five slots;
+ * below 320px the « » buttons hide too (1 and the last page stay as numbers).
  */
-declare function TablePagination({ pageSize, onPageSizeChange, pageSizeOptions, rangeStart, rangeEnd, total, unit, hasPrev, hasNext, onPrev, onNext, loading, 'aria-label': ariaLabel, }: TablePaginationProps): react_jsx_runtime.JSX.Element | null;
+declare function TablePagination(props: TablePaginationProps | TablePaginationPagesProps): react_jsx_runtime.JSX.Element | null;
 
 declare const modeToggleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const modeToggleItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -2044,7 +2136,7 @@ interface ModeToggleProps<T extends string> extends Omit<React.HTMLAttributes<HT
     onChange: (value: T) => void;
     itemClassName?: string;
 }
-declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
+declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const actionFooterVariants: (props?: ({
     position?: "fixed" | "static" | "sticky" | null | undefined;
@@ -2078,7 +2170,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -2132,19 +2224,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -2171,10 +2263,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2198,7 +2290,7 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
     appearance?: "card" | "plain" | null | undefined;
@@ -2267,6 +2359,7 @@ type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>[
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
 type RadioGroupDensity = NonNullable<VariantProps<typeof radioVariants>["density"]>;
 type RadioGroupOrientation = NonNullable<VariantProps<typeof radioGroupVariants>["orientation"]>;
+type RadioGroupMarker = "none" | "number";
 interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup$1.Root>, "children" | "orientation">, Omit<VariantProps<typeof radioGroupVariants>, "appearance" | "orientation"> {
     children: React.ReactNode;
     orientation?: RadioGroupOrientation;
@@ -2274,10 +2367,23 @@ interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Rad
     columns?: RadioGroupColumns;
     density?: RadioGroupDensity;
     required?: boolean;
+    /**
+     * What goes before each option's label.
+     * - `"none"` (default): the radio circle.
+     * - `"number"`: a number circle counted from 1 in its place, filled when selected. The group
+     *   counts the Radios among its children, through Fragments and DOM elements; a Radio a
+     *   component renders takes `number`. The accessible name starts with the number ("3번 …").
+     */
+    marker?: RadioGroupMarker;
 }
 interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup$1.Item>, "children"> {
     children: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * The option's number under the group's `marker="number"`; it wins over the group's count. Give
+     * it to a Radio a component renders, which the group cannot count.
+     */
+    number?: number;
 }
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
@@ -2405,4 +2511,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogListFit, type DialogListHeight, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DatePicker, type DatePickerBaseProps, type DatePickerGranularity, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSize, type DateRangeValue, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogListFit, type DialogListHeight, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupMarker, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationPagesProps, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };