@atom-learning/components 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/components/badge/Badge.d.ts

@@ -16,6 +16,11 @@ export declare const Badge: (({ ref, size, overflow, ...rest }: BadgeProps) => R
     Icon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
     Text: ({ children, ...rest }: {
         overflow?: "ellipsis" | "wrap" | undefined;
+    } & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
     } & Omit<{
@@ -25,6 +30,6 @@ export declare const Badge: (({ ref, size, overflow, ...rest }: BadgeProps) => R
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "overflow">) => React.JSX.Element;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "family" | "noCapsize" | "overflow" | "size" | "weight">) => React.JSX.Element;
 };
 export {};

package/dist/components/badge/BadgeText.d.ts

@@ -6,6 +6,11 @@ declare const StyledBadgeText: import("../..").PolymorphicComponent<import("../.
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>, {
     overflow?: "ellipsis" | "wrap" | undefined;
+} & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>;
 type BadgeTextProps = React.ComponentProps<typeof StyledBadgeText>;
 export declare const BadgeText: ({ children, ...rest }: BadgeTextProps) => React.JSX.Element;

package/dist/components/data-table/DataTable.d.ts

@@ -91,6 +91,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.
      */
     GlobalFilter: ({ onChange, label, hideLabel, ...rest }: Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<{
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    } & {
         as?: never;
     } & Omit<{
         size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
@@ -99,7 +104,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as">, "as" | "ref" | "type"> & {
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "ref" | "type"> & {
         type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
         as?: never;
         disabled?: boolean;

package/dist/components/data-table/DataTable.types.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnOrderTableState, ColumnPinningTableState, ColumnSizingTableState, ExpandedTableState, ColumnFiltersTableState, GlobalFilterTableState, GroupingTableState, PaginationTableState, Row, RowSelectionState, RowSelectionTableState, SortDirection, SortingTableState, Table, VisibilityTableState } from '@tanstack/react-table';
+import type { InitialTableState, Row, RowSelectionState, SortDirection, Table } from '@tanstack/react-table';
 import * as React from 'react';
 export declare enum AsyncDataState {
     NONE = "none",
@@ -50,7 +50,7 @@ export type DataTableContextType<T = unknown> = Table<T> & {
     setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>;
 };
 export type TableData = Array<Record<string, unknown>>;
-export type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & ColumnFiltersTableState & GlobalFilterTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
+export type InitialState = InitialTableState;
 export type DefaultSort = {
     column: string;
     direction: SortDirection;

package/dist/components/data-table/DataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  ColumnFiltersTableState,\n  GlobalFilterTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type AsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type AsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type GetAsyncData = (\n  options: AsyncDataOptions\n) => Promise<AsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: AsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    ColumnFiltersTableState &\n    GlobalFilterTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AAmBA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,aAAA;CACA,eAAA,eAAA;CACA,eAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  InitialTableState,\n  Row,\n  RowSelectionState,\n  SortDirection,\n  Table\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type AsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type AsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type GetAsyncData = (\n  options: AsyncDataOptions\n) => Promise<AsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: AsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\n// Use tanstack's purpose-built initial-state type rather than composing from\n// the full `*TableState` interfaces: a shallow `Partial<… & PaginationTableState>`\n// leaves `pagination` typed as the full `PaginationState` (requiring `pageIndex`),\n// whereas `InitialTableState` correctly types it as `Partial<PaginationState>` so\n// consumers can pass e.g. `{ pagination: { pageSize } }`.\nexport type InitialState = InitialTableState\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AASA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,aAAA;CACA,eAAA,eAAA;CACA,eAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}

package/dist/components/data-table/usePagination.d.ts

@@ -1,6 +1,6 @@
 import type { PaginationState } from '@tanstack/react-table';
 import * as React from 'react';
-export declare const usePagination: (initialPaginationState: PaginationState | undefined) => {
+export declare const usePagination: (initialPaginationState: Partial<PaginationState> | undefined) => {
     isPaginated: boolean;
     paginationState: PaginationState | undefined;
     setPaginationState: React.Dispatch<React.SetStateAction<PaginationState | undefined>>;

package/dist/components/data-table/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport * as React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n  initialPaginationState: PaginationState | undefined\n) => {\n  const [isPaginated, setIsPaginated] = React.useState<boolean>(\n    !!initialPaginationState\n  )\n\n  const [paginationState, setPaginationState] = React.useState<\n    PaginationState | undefined\n  >({\n    ...defaultPaginationState,\n    ...(initialPaginationState || {})\n  })\n\n  const applyPagination = React.useCallback(() => {\n    setIsPaginated(true)\n  }, [])\n\n  return {\n    isPaginated,\n    paginationState,\n    setPaginationState,\n    applyPagination\n  }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBACX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAMD,OAAO;EACL;EACA;EACA;EACA,iBARsB,QAAM,kBAAkB;GAC9C,eAAe,IAAI;EACrB,GAAG,CAAC,CAMF;CACF;AACF"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/data-table/usePagination.ts"],"sourcesContent":["import type { PaginationState } from '@tanstack/react-table'\nimport * as React from 'react'\n\nconst defaultPaginationState: PaginationState = { pageIndex: 0, pageSize: 10 }\nexport const usePagination = (\n  // Initial pagination may be partial (e.g. just `pageSize`); defaults below\n  // fill the rest, so the working `paginationState` stays a full PaginationState.\n  initialPaginationState: Partial<PaginationState> | undefined\n) => {\n  const [isPaginated, setIsPaginated] = React.useState<boolean>(\n    !!initialPaginationState\n  )\n\n  const [paginationState, setPaginationState] = React.useState<\n    PaginationState | undefined\n  >({\n    ...defaultPaginationState,\n    ...(initialPaginationState || {})\n  })\n\n  const applyPagination = React.useCallback(() => {\n    setIsPaginated(true)\n  }, [])\n\n  return {\n    isPaginated,\n    paginationState,\n    setPaginationState,\n    applyPagination\n  }\n}\n"],"mappings":";;AAGA,IAAM,yBAA0C;CAAE,WAAW;CAAG,UAAU;AAAG;AAC7E,IAAa,iBAGX,2BACG;CACH,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAC1C,CAAC,CAAC,sBACJ;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAElD;EACA,GAAG;EACH,GAAI,0BAA0B,CAAC;CACjC,CAAC;CAMD,OAAO;EACL;EACA;EACA;EACA,iBARsB,QAAM,kBAAkB;GAC9C,eAAe,IAAI;EACrB,GAAG,CAAC,CAMF;CACF;AACF"}

package/dist/components/empty-state/EmptyState.d.ts

@@ -25,6 +25,11 @@ export declare const EmptyState: {
     }) => React.JSX.Element;
     Body: (props: {
         size?: ("lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    } & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
     } & Omit<{
@@ -34,6 +39,6 @@ export declare const EmptyState: {
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "size">) => React.JSX.Element;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "family" | "noCapsize" | "size" | "weight">) => React.JSX.Element;
 };
 export {};

package/dist/components/empty-state/EmptyStateBody.d.ts

@@ -6,6 +6,11 @@ declare const StyledEmptyStateBody: import("../..").PolymorphicComponent<import(
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>, {
     size?: ("lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+} & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>;
 type EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>;
 export declare const EmptyStateBody: (props: EmptyStateBodyProps) => React.JSX.Element;

package/dist/components/file-input/FileInput.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { StyledComponentProps } from '../../styled';
+import { type StyledComponentProps } from '../../styled';
 import { Button } from '../button/Button';
 export type FileInputProps = Omit<StyledComponentProps<typeof Button, 'label'>, 'as'> & {
     onFileSelect: (selection: FileList | null) => void;
     accept?: string;
     multiple?: boolean;
+    disabled?: boolean;
 };
-export declare function FileInput({ accept, children, multiple, onFileSelect, ...rest }: FileInputProps): React.JSX.Element;
+export declare function FileInput({ accept, children, className, disabled, multiple, onFileSelect, ...rest }: FileInputProps): React.JSX.Element;
 export declare namespace FileInput {
     var displayName: string;
 }

package/dist/components/file-input/FileInput.js

@@ -1,16 +1,19 @@
+import { cn } from "../../styled.js";
 import { Button } from "../button/Button.js";
 import { Icon } from "../icon/Icon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload } from "@atom-learning/icons";
 //#region src/components/file-input/FileInput.tsx
-var FileInput = ({ accept, children, multiple = false, onFileSelect, ...rest }) => {
+var FileInput = ({ accept, children, className, disabled = false, multiple = false, onFileSelect, ...rest }) => {
 	const handleFileSelect = (event) => {
 		const { files } = event.target;
 		onFileSelect(files);
 	};
 	return /* @__PURE__ */ jsxs(Button, {
 		as: "label",
+		"aria-disabled": disabled || void 0,
+		className: cn(disabled && "pointer-events-none cursor-not-allowed opacity-30", className),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(Icon, { is: Upload }),
@@ -20,6 +23,7 @@ var FileInput = ({ accept, children, multiple = false, onFileSelect, ...rest })
 				onChange: handleFileSelect,
 				accept,
 				multiple,
+				disabled,
 				hidden: true
 			})
 		]

package/dist/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":[],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { StyledComponentProps } from '../../styled'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\n\n// FileInput always renders the Button as a <label>, so its public props are\n// Button's own props retargeted to the label element\nexport type FileInputProps = Omit<\n  StyledComponentProps<typeof Button, 'label'>,\n  'as'\n> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"mappings":";;;;;;AAkBA,IAAa,aAAa,EACxB,QACA,UACA,WAAW,OACX,cACA,GAAG,WACiB;CACpB,MAAM,oBAAoB,UAA+C;EACvE,MAAM,EAAE,UAAU,MAAM;EAExB,aAAa,KAAK;CACpB;CAEA,OACE,qBAAC,QAAD;EAAQ,IAAG;EAAQ,GAAI;YAAvB;GACE,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GAClB;GACD,oBAAC,SAAD;IACE,MAAK;IACL,UAAU;IACF;IACE;IACV,QAAA;GACD,CAAA;EACK;;AAEZ;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FileInput.js","names":[],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { cn, type StyledComponentProps } from '../../styled'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\n\n// FileInput always renders the Button as a <label>, so its public props are\n// Button's own props retargeted to the label element\nexport type FileInputProps = Omit<\n  StyledComponentProps<typeof Button, 'label'>,\n  'as'\n> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n  disabled?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  className,\n  disabled = false,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  // The rendered element is a <label>, which ignores the `disabled` attribute\n  // and never matches `:disabled`. Disable the hidden input (so the label can't\n  // open the picker) and mirror Button's disabled affordance via aria-disabled\n  // + pointer-events-none/opacity so the state is visible and interaction-free.\n  return (\n    <Button\n      as=\"label\"\n      aria-disabled={disabled || undefined}\n      className={cn(\n        disabled && 'pointer-events-none cursor-not-allowed opacity-30',\n        className\n      )}\n      {...rest}\n    >\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"mappings":";;;;;;;AAmBA,IAAa,aAAa,EACxB,QACA,UACA,WACA,WAAW,OACX,WAAW,OACX,cACA,GAAG,WACiB;CACpB,MAAM,oBAAoB,UAA+C;EACvE,MAAM,EAAE,UAAU,MAAM;EAExB,aAAa,KAAK;CACpB;CAMA,OACE,qBAAC,QAAD;EACE,IAAG;EACH,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,YAAY,qDACZ,SACF;EACA,GAAI;YAPN;GASE,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;GAClB;GACD,oBAAC,SAAD;IACE,MAAK;IACL,UAAU;IACF;IACE;IACA;IACV,QAAA;GACD,CAAA;EACK;;AAEZ;AAEA,UAAU,cAAc"}

package/dist/components/input/Input.d.ts

@@ -11,7 +11,12 @@ declare const StyledInputText: import("../..").PolymorphicComponent<import("../.
     noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-}>, unknown>;
+}>, {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>;
 export type InputTextProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as' | 'ref'> & {
     type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
     as?: never;

package/dist/components/keyboard-shortcut/KeyboardShortcut.d.ts

@@ -20,7 +20,12 @@ declare const StyledKeyboardShortcutIndicator: import("../..").PolymorphicCompon
     noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-}>, unknown>;
+}>, {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>;
 type KeyboardShortcutIndicatorProps = React.ComponentProps<typeof StyledKeyboardShortcutIndicator>;
 export declare const KeyboardShortcutIndicator: (props: KeyboardShortcutIndicatorProps) => React.JSX.Element;
 export {};

package/dist/components/keyboard-shortcut/index.d.ts

@@ -12,6 +12,11 @@ export declare const KeyboardShortcut: (({ ref, asChild, config, targetWindow, o
     ref?: React.Ref<HTMLDivElement>;
 }) => import("react").JSX.Element) & {
     Indicator: (props: {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    } & {
         as?: never;
     } & Omit<{
         size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
@@ -20,5 +25,5 @@ export declare const KeyboardShortcut: (({ ref, asChild, config, targetWindow, o
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as">) => import("react").JSX.Element;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "family" | "noCapsize" | "size" | "weight">) => import("react").JSX.Element;
 };

package/dist/components/navigation/NavigationMenu.d.ts

@@ -35,7 +35,12 @@ export declare const NavigationMenu: {
         noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-    }>, unknown>;
+    }>, {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    }>;
     DropdownTrigger: ({ ref, children, active, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
         active?: boolean | undefined;
     }>>) => React.JSX.Element;

package/dist/components/navigation/NavigationMenuDropdownItem.d.ts

@@ -6,4 +6,9 @@ export declare const NavigationMenuDropdownItemTitle: import("../..").Polymorphi
     noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-}>, unknown>;
+}>, {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>;

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts

@@ -596,6 +596,11 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: Navigation
     }) => React.JSX.Element, unknown>>) => React.JSX.Element;
     Text: (props: {
         isExpanded?: boolean | undefined;
+    } & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
     } & Omit<{
@@ -605,6 +610,6 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: Navigation
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     } & {
         as?: never;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "isExpanded">) => React.JSX.Element;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as" | "family" | "isExpanded" | "noCapsize" | "size" | "weight">) => React.JSX.Element;
 };
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.d.ts

@@ -6,6 +6,11 @@ declare const StyledNavigationMenuVerticalText: import("../..").PolymorphicCompo
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>, {
     isExpanded?: boolean | undefined;
+} & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>;
 type StyledNavigationMenuVerticalTextProps = React.ComponentProps<typeof StyledNavigationMenuVerticalText>;
 export declare const NavigationMenuVerticalText: (props: StyledNavigationMenuVerticalTextProps) => React.JSX.Element;

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -11,6 +11,11 @@ export declare const SegmentedControl: {
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     }>, {
         size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    } & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     }>>, 'size'>) => import("react").JSX.Element;
     Description: (props: Omit<React.ComponentProps<import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
         size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
@@ -19,6 +24,11 @@ export declare const SegmentedControl: {
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     }>, {
         size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+    } & {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     }>>, 'size'>) => import("react").JSX.Element;
     Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, 'size'>) => import("react").JSX.Element;
     Content: import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>>, unknown>;

package/dist/components/segmented-control/SegmentedControlDescription.d.ts

@@ -6,6 +6,11 @@ declare const StyledText: import("../..").PolymorphicComponent<import("../..").P
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>, {
     size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+} & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>;
 export declare const SegmentedControlDescription: (props: Omit<React.ComponentProps<typeof StyledText>, 'size'>) => React.JSX.Element;
 export {};

package/dist/components/segmented-control/SegmentedControlHeading.d.ts

@@ -6,6 +6,11 @@ declare const StyledHeading: import("../..").PolymorphicComponent<import("../.."
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>, {
     size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
+} & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>;
 export declare const SegmentedControlHeading: (props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>) => React.JSX.Element;
 export {};

package/dist/components/side-bar/SideBar.d.ts

@@ -27,7 +27,12 @@ export declare const SideBar: (({ theme, className, children, type, offset, styl
         noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-    }>, unknown>;
+    }>, {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    }>;
     Header: import("../..").PolymorphicComponent<"div", unknown>;
     Body: import("../..").PolymorphicComponent<"div", unknown>;
     Footer: import("../..").PolymorphicComponent<"div", unknown>;

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -21,4 +21,9 @@ export declare const SideBarBrandName: import("../..").PolymorphicComponent<impo
     noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-}>, unknown>;
+}>, {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>;

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -6,4 +6,9 @@ export declare const StepperStepLabel: import("../..").PolymorphicComponent<impo
 }>, {
     direction?: "horizontal" | "vertical" | undefined;
     status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
+} & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 }>;

package/dist/components/top-bar/TopBar.d.ts

@@ -21,7 +21,12 @@ export declare const TopBar: {
         noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-    }>, unknown>;
+    }>, {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    }>;
     ActionIcon: ({ ref, icon, ...rest }: Omit<Omit<{
         theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
         appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;

package/dist/components/top-bar/TopBarBrand.d.ts

@@ -8,5 +8,10 @@ export declare const TopBarBrandName: import("../..").PolymorphicComponent<impor
     noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
     family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
-}>, unknown>;
+}>, {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>;
 export declare const TopBarBrand: import("../..").PolymorphicComponent<"a", unknown>;