@indico-data/design-system 3.19.0 → 3.21.0

package/lib/components/pagination/Pagination.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Pagination } from './Pagination';
 declare const meta: Meta;
 export default meta;

package/lib/components/pill/Pill.d.ts

@@ -1,2 +1,2 @@
-import { PillProps } from './types';
+import { type PillProps } from './types';
 export declare const Pill: ({ children, className, color, size, shade, ...rest }: PillProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/pill/Pill.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Pill } from './Pill';
 declare const meta: Meta;
 export default meta;

package/lib/components/pill/types.d.ts

@@ -1,5 +1,5 @@
-import { ChromaticColor } from '../../types';
-import React from 'react';
+import { type ChromaticColor } from '../../types';
+import type React from 'react';
 export type PillSize = 'sm' | 'md' | 'lg';
 export type PillColor = ChromaticColor;
 export type PillShade = 1 | 2 | 3 | 4 | 5;

package/lib/components/skeleton/Skeleton.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Skeleton } from './Skeleton';
 declare const meta: Meta;
 export default meta;

package/lib/components/stepper/Stepper.d.ts

@@ -1,2 +1,2 @@
-import { StepperProps } from './types';
+import { type StepperProps } from './types';
 export declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, text: textProp, }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/Stepper.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Stepper } from './Stepper';
 declare const meta: Meta;
 export default meta;

package/lib/components/stepper/components/Legend.d.ts

@@ -1,2 +1,2 @@
-import { StepperLegendProps } from '../types';
+import { type StepperLegendProps } from '../types';
 export declare const Legend: ({ currentStep, steps, onStepClick }: StepperLegendProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /** Customizable text for Stepper. */
 export interface StepperText {
     /** Label for the "Previous Step" button. Default: "Previous Step" */

package/lib/components/table/Table.d.ts

@@ -1,2 +1,2 @@
-import { TableProps } from './types';
+import { type TableProps } from './types';
 export declare const Table: <T>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/table/Table.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type SampleDataRow } from './sampleData';
 import { Table } from './Table';
-import { SampleDataRow } from './sampleData';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Table<SampleDataRow>>;

package/lib/components/table/components/HorizontalStickyHeader.d.ts

@@ -1,4 +1,4 @@
-import { HorizontalStickyHeaderText } from '../types';
+import { type HorizontalStickyHeaderText } from '../types';
 interface HorizontalStickyHeaderProps {
     children: React.ReactNode;
     position: number;

package/lib/components/table/components/helpers.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from 'styled-components';
+import { type CSSObject } from 'styled-components';
 export declare const getPreviousHeadersWidth: (position: number, pinnedColumnIds: string[]) => number;
 export declare const applyStickyStylesToTableHeader: (position: number, left: number) => Promise<void>;
 export declare const sortPinnedColumns: <T>(columns: T[], pinnedColumnIds: string[]) => T[];

package/lib/components/table/hooks/usePinnedColumnsManager.d.ts

@@ -1,4 +1,4 @@
-import { TableColumn, HorizontalStickyHeaderText } from '../types';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 /**
  * Hook to manage pinned columns in a table
  * Handles initialization, toggling, positioning and resizing of pinned columns

package/lib/components/table/sampleData.d.ts

@@ -1,4 +1,4 @@
-import { TableColumn } from './types';
+import { type TableColumn } from './types';
 export interface SampleDataRow {
     name: string;
     class: string;

package/lib/components/table/types.d.ts

@@ -1,5 +1,5 @@
-import { Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn, IDataTableProps } from 'react-data-table-component';
-import { CSSObject } from 'styled-components';
+import { type Direction as RDTDirection, type Alignment as RDTAlignment, type TableColumn as RDTTableColumn, type IDataTableProps } from 'react-data-table-component';
+import { type CSSObject } from 'styled-components';
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
 export interface PinnableColumn<T> extends RDTTableColumn<T> {

package/lib/components/table/utils/processColumns.d.ts

@@ -1,2 +1,2 @@
-import { TableColumn, HorizontalStickyHeaderText } from '../types';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 export declare const processColumns: <T>(columns: TableColumn<T>[], pinnedColumnIds: string[], togglePinnedColumn: (id: string) => void, text?: HorizontalStickyHeaderText) => TableColumn<T>[];

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -1,4 +1,4 @@
-import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
+import { type Row, type ColumnDef, type SortingState } from '@tanstack/react-table';
 /** Customizable text for TanstackTable. */
 export interface TanstackTableText {
     /** Message while table is loading. Default: "Table is loading..." */

package/lib/components/tanstackTable/TanstackTable.d.ts

@@ -1,4 +1,4 @@
-import { Props } from './TankstackTable.types';
+import { type Props } from './TankstackTable.types';
 export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, text: textProp, ...rest }: Props<T & {
     id: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/components/tanstackTable/TanstackTable.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type Person } from './mock-data/mock-data';
 import { TanstackTable } from './TanstackTable';
-import { Person } from './mock-data/mock-data';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof TanstackTable<Person>>;

package/lib/components/tanstackTable/__tests__/__mocks__/test-mock-data.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { type ColumnDef } from "@tanstack/react-table";
 export interface TestData {
     id: string;
     name: string;

package/lib/components/tanstackTable/components/ActionBar/ActionBar.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Row, Table } from '@tanstack/react-table';
+import { type Row, type Table } from '@tanstack/react-table';
+import type React from 'react';
 type Props<T extends object> = {
     /** Table instance. */
     table: Table<T & {

package/lib/components/tanstackTable/components/ActionBar/ActionBar.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { ActionBar } from './ActionBar';
 declare const meta: Meta;
 export default meta;

package/lib/components/tanstackTable/components/TableBody/TableBody.d.ts

@@ -1,4 +1,4 @@
-import { Table } from '@tanstack/react-table';
+import { type Table } from '@tanstack/react-table';
 export type Props<T> = {
     table: Table<T>;
     onRowClick?: ((row: T & {

package/lib/components/tanstackTable/components/TableHeader/TableHeader.d.ts

@@ -1,4 +1,4 @@
-import { Table } from '@tanstack/react-table';
+import { type Table } from '@tanstack/react-table';
 interface Props {
     table: Table<any>;
 }

package/lib/components/tanstackTable/components/TableLoading/TableLoading.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { type ColumnDef } from '@tanstack/react-table';
 export type Props<T> = {
     columns: ColumnDef<T>[];
     message?: string;

package/lib/components/tanstackTable/components/TablePagination/TablePagination.d.ts

@@ -1,4 +1,4 @@
-import { PaginationText } from '../../../pagination';
+import { type PaginationText } from '../../../pagination';
 interface TablePaginationProps {
     rowsPerPage: number;
     rowCount: number;

package/lib/components/tanstackTable/docs/internalSorting/InternalClientSideSorting.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type Person } from '../../mock-data/mock-data';
 import { TanstackTable } from '../../TanstackTable';
-import { Person } from '../../mock-data/mock-data';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof TanstackTable<Person>>;

package/lib/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type Person } from '../../mock-data/mock-data';
 import { TanstackTable } from '../../TanstackTable';
-import { Person } from '../../mock-data/mock-data';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof TanstackTable<Person>>;

package/lib/components/tanstackTable/docs/withRowClick/WithRowClick.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type Person } from '../../mock-data/mock-data';
 import { TanstackTable } from '../../TanstackTable';
-import { Person } from '../../mock-data/mock-data';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof TanstackTable<Person>>;

package/lib/components/tanstackTable/helpers.d.ts

@@ -1,5 +1,5 @@
-import { Column } from '@tanstack/react-table';
-import { CSSProperties } from 'react';
+import { type Column } from '@tanstack/react-table';
+import { type CSSProperties } from 'react';
 export declare const getThStyles: <T>(column: Column<T>) => {
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;

package/lib/components/tanstackTable/mock-data/table-configuration.d.ts

@@ -1,3 +1,3 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Person } from './mock-data';
+import { type ColumnDef } from '@tanstack/react-table';
+import { type Person } from './mock-data';
 export declare const columns: ColumnDef<Person>[];

package/lib/components/tanstackTable/useTanstackTable.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { type ColumnDef } from '@tanstack/react-table';
 type Props<T> = {
     defaultColumns: ColumnDef<T>[];
 };

package/lib/components/toast/Toast.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { ToastContainer } from './index';
 declare const meta: Meta<typeof ToastContainer>;
 export default meta;

package/lib/components/tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { PlacesType, PositionStrategy } from 'react-tooltip';
+import { type CSSProperties } from 'react';
+import { type PlacesType, type PositionStrategy } from 'react-tooltip';
 export interface TooltipProps {
     id: string;
     /** Whether the tooltip should be shown on click */

package/lib/components/tooltip/Tooltip.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Tooltip } from './Tooltip';
 declare const meta: Meta;
 export default meta;

package/lib/components/truncate/Truncate.d.ts

@@ -1,2 +1,2 @@
-import { TruncateProps } from './types';
+import { type TruncateProps } from './types';
 export declare const Truncate: ({ numLines, tooltipOptions, children, ...rest }: TruncateProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/truncate/Truncate.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Truncate } from './Truncate';
-import { TruncateProps } from './types';
+import { type TruncateProps } from './types';
 declare const meta: Meta<typeof Truncate>;
 export default meta;
 type Story = StoryObj<TruncateProps>;

package/lib/components/truncate/types.d.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from '../tooltip/Tooltip';
+import { type TooltipProps } from '../tooltip/Tooltip';
 export interface TruncateProps {
     /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
     numLines?: number;

package/lib/docs/BaseColorPalette/BaseColorsPalette.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { BaseColorPalette } from './BaseColorPalette';
 declare const meta: Meta<typeof BaseColorPalette>;
 export default meta;

package/lib/docs/SemanticTokens/ColorSwatch.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ColorSwatchProps {
     colorVar: string;
 }

package/lib/docs/SemanticTokens/SemanticTokens.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 export declare const SemanticBackgroundTokens: () => import("react/jsx-runtime").JSX.Element;
 export declare const SemanticBorderTokens: () => import("react/jsx-runtime").JSX.Element;
 export declare const SemanticFontTokens: () => import("react/jsx-runtime").JSX.Element;

package/lib/index.css

@@ -133,21 +133,21 @@
   --pf-yellow-color-700: #58481d;
   --pf-yellow-color-800: #322c1b;
   --pf-yellow-color-900: #1b160e;
-  --pf-green-color: #14b869;
+  --pf-green-color: #14b866;
   --pf-green-color-50: #f7fdfa;
   --pf-green-color-100: #effbf5;
   --pf-green-color-150: #e7f9f0;
   --pf-green-color-200: #def7eb;
   --pf-green-color-250: #c2f4db;
-  --pf-green-color-300: #a8f0cd;
-  --pf-green-color-400: #3eea97;
-  --pf-green-color-450: #18dc7e;
-  --pf-green-color-500: #14b869;
+  --pf-green-color-300: #97edc2;
+  --pf-green-color-400: #44e494;
+  --pf-green-color-450: #1cd97a;
+  --pf-green-color-500: #14b866;
   --pf-green-color-550: #129e45;
-  --pf-green-color-600: #17824e;
-  --pf-green-color-700: #175e3c;
-  --pf-green-color-800: #173627;
-  --pf-green-color-900: #0e1b15;
+  --pf-green-color-600: #14804a;
+  --pf-green-color-700: #175e3b;
+  --pf-green-color-800: #173626;
+  --pf-green-color-900: #0e1b14;
   --pf-teal-color: #29a3a3;
   --pf-teal-color-50: #f6fdfd;
   --pf-teal-color-100: #eefcfc;
@@ -219,6 +219,7 @@
   --pf-primary-color-500: #50647c;
   --pf-primary-color-550: #455066;
   --pf-primary-color-600: #243447;
+  --pf-primary-color-650: #1f2a37;
   --pf-primary-color-700: #192534;
   --pf-primary-color-800: #111b28;
   --pf-primary-color-900: #0c141d;
@@ -250,6 +251,7 @@
   --pf-tertiary-color-550: #5f6a85;
   --pf-tertiary-color-600: #58637b;
   --pf-tertiary-color-700: #4b5364;
+  --pf-tertiary-color-750: #373f51;
   --pf-tertiary-color-800: #2c303a;
   --pf-tertiary-color-900: #111317;
 }
@@ -443,14 +445,17 @@
   --pf-semantic-background-secondary: var(--pf-gray-color-50);
   --pf-semantic-background-tertiary: var(--pf-gray-color-200);
   --pf-semantic-background-quaternary: var(--pf-gray-color-250);
+  --pf-semantic-background-soft: var(--pf-gray-color-250);
   --pf-semantic-background-accent: var(--pf-secondary-color-200);
   --pf-semantic-background-highlight: var(--pf-blue-color-250);
   --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
   --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
   --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
+  --pf-semantic-background-contrast: var(--pf-secondary-color-150);
   --pf-semantic-border-primary: var(--pf-gray-color-300);
   --pf-semantic-border-secondary: var(--pf-gray-color-250);
-  --pf-semantic-border-hover: var(--pf-gray-color-400);
+  --pf-semantic-border-tertiary: var(--pf-gray-color-200);
+  --pf-semantic-border-quaternary: var(--pf-gray-color-400);
   --pf-semantic-border-soft: var(--pf-secondary-color-450);
   --pf-semantic-border-accent: var(--pf-blue-color-450);
   --pf-semantic-border-error: var(--pf-red-color-450);
@@ -514,14 +519,17 @@
   --pf-semantic-background-secondary: var(--pf-primary-color-800);
   --pf-semantic-background-tertiary: var(--pf-primary-color-600);
   --pf-semantic-background-quaternary: var(--pf-primary-color-500);
+  --pf-semantic-background-soft: var(--pf-tertiary-color-750);
   --pf-semantic-background-accent: var(--pf-blue-color-800);
   --pf-semantic-background-highlight: var(--pf-blue-color-700);
   --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
   --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
-  --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-50);
+  --pf-semantic-background-contrast: var(--pf-primary-color-650);
   --pf-semantic-border-primary: var(--pf-tertiary-color-700);
   --pf-semantic-border-secondary: var(--pf-primary-color-600);
-  --pf-semantic-border-hover: var(--pf-tertiary-color-600);
+  --pf-semantic-border-tertiary: var(--pf-tertiary-color-750);
+  --pf-semantic-border-quaternary: var(--pf-tertiary-color-600);
   --pf-semantic-border-soft: var(--pf-secondary-color-600);
   --pf-semantic-border-accent: var(--pf-secondary-color-400);
   --pf-semantic-border-error: var(--pf-red-color-450);
@@ -5373,7 +5381,7 @@ form {
 .password-input-wrapper textarea:hover,
 .textarea-wrapper input:hover,
 .textarea-wrapper textarea:hover {
-  border-color: var(--pf-semantic-border-hover);
+  border-color: var(--pf-semantic-border-quaternary);
 }
 .time-input-wrapper input:focus,
 .time-input-wrapper textarea:focus,
@@ -5479,7 +5487,7 @@ form {
   box-shadow: none;
 }
 .select-wrapper .select__control:hover:not(:focus) {
-  border-color: var(--pf-semantic-border-hover);
+  border-color: var(--pf-semantic-border-quaternary);
 }
 .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
   border: var(--pf-border-sm) solid var(--pf-semantic-border-accent);

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
-import React$1, { CSSProperties, MouseEventHandler, ReactNode, ReactElement } from 'react';
+import React$1, { ReactNode, CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
 import { CSSObject } from 'styled-components';
 import { Props as Props$4 } from 'react-select';
@@ -22,6 +22,37 @@ declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.E
 
 declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
 
+/** Customizable text for form Label. */
+interface FormLabelText {
+    /** Text appended to aria-label for required fields. Default: "(required)" */
+    required?: string;
+}
+
+interface LabelProps {
+    label?: string;
+    name: string;
+    isRequired?: boolean;
+    hasHiddenLabel?: boolean;
+    /** Customizable display text. */
+    text?: FormLabelText;
+}
+
+type SelectOption = {
+    label: string;
+    value: string;
+    detail?: ReactNode;
+    [key: string]: any;
+};
+/** Customizable text for Select. Extends FormLabelText for label-related text. */
+interface SelectText extends FormLabelText {
+    /** Placeholder text when no option is selected. Default: "Select..." */
+    placeholder?: string;
+    /** Text when there are no options. Default: "No options" */
+    noOptions?: string;
+    /** Text while loading options. Default: "Loading..." */
+    loading?: string;
+}
+
 declare const indicons: {
     'indico-o-white': react_jsx_runtime.JSX.Element;
     account: react_jsx_runtime.JSX.Element;
@@ -197,35 +228,19 @@ type IconProps = PermafrostComponent & {
     faPrefix?: IconPrefix;
 };
 
-/** Customizable text for form Label. */
-interface FormLabelText {
-    /** Text appended to aria-label for required fields. Default: "(required)" */
-    required?: string;
-}
-
-interface LabelProps {
-    label?: string;
-    name: string;
-    isRequired?: boolean;
-    hasHiddenLabel?: boolean;
-    /** Customizable display text. */
-    text?: FormLabelText;
-}
-
-type SelectOption = {
-    label: string;
-    value: string;
-    detail?: ReactNode;
-    [key: string]: any;
-};
-/** Customizable text for Select. Extends FormLabelText for label-related text. */
-interface SelectText extends FormLabelText {
-    /** Placeholder text when no option is selected. Default: "Select..." */
-    placeholder?: string;
-    /** Text when there are no options. Default: "No options" */
-    noOptions?: string;
-    /** Text while loading options. Default: "Loading..." */
-    loading?: string;
+type PillSize = 'sm' | 'md' | 'lg';
+type PillColor = ChromaticColor;
+type PillShade = 1 | 2 | 3 | 4 | 5;
+interface PillProps {
+    /** The content displayed inside the pill */
+    children: React$1.ReactNode | React$1.ReactNode[];
+    /** Applies a CSS class to change the style of the pill */
+    color?: PillColor;
+    /** Applies a CSS class to change the size of the pill */
+    size?: PillSize;
+    /** Applies a CSS class to change the shade of the pill */
+    shade?: PillShade;
+    className?: string;
 }
 
 type Direction = `${Direction$1}`;
@@ -268,21 +283,6 @@ interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' |
     text?: TableText;
 }
 
-type PillSize = 'sm' | 'md' | 'lg';
-type PillColor = ChromaticColor;
-type PillShade = 1 | 2 | 3 | 4 | 5;
-interface PillProps {
-    /** The content displayed inside the pill */
-    children: React$1.ReactNode | React$1.ReactNode[];
-    /** Applies a CSS class to change the style of the pill */
-    color?: PillColor;
-    /** Applies a CSS class to change the size of the pill */
-    size?: PillSize;
-    /** Applies a CSS class to change the shade of the pill */
-    shade?: PillShade;
-    className?: string;
-}
-
 type PermafrostComponent = {
     id?: string;
     className?: string;