@indico-data/design-system 2.24.0 → 2.24.1

package/lib/index.d.ts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
 import React$1, { ChangeEvent, MouseEventHandler } from 'react';
-import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1 } from '@/types';
+import { PermafrostComponent as PermafrostComponent$1, IconName as IconName$1, IconSizes as IconSizes$1, SemanticColor } from '@/types';
 import { AriaButtonProps } from '@react-types/button';
 import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
 import { DateRange } from 'react-day-picker';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
-import { Props as Props$s } from 'react-select';
+import { Props as Props$r } from 'react-select';
 import { Placement } from '@floating-ui/react-dom';
 
 declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
@@ -222,25 +222,25 @@ declare const allColors: {
     readonly backgroundColor: "#182432";
 };
 
-type Props$r = PermafrostComponent$1 & {
+type Props$q = PermafrostComponent$1 & {
     content: React$1.ReactNode;
     header?: React$1.ReactNode | string;
     open?: boolean;
 };
-declare const Accordion: (props: Props$r) => react_jsx_runtime.JSX.Element;
+declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
 
-type Props$q = PermafrostComponent$1 & {
+type Props$p = PermafrostComponent$1 & {
     style?: object;
     children: React$1.ReactNode;
 };
-declare const Section: (props: Props$q) => react_jsx_runtime.JSX.Element;
+declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
 
-type Props$p = PermafrostComponent$1 & {
+type Props$o = PermafrostComponent$1 & {
     title?: string;
     style?: object;
     children: React$1.ReactNode;
 };
-declare const SectionBlock: (props: Props$p) => react_jsx_runtime.JSX.Element;
+declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
 
 type SectionBodyProps = PermafrostComponent$1 & {
     style?: object;
@@ -248,11 +248,11 @@ type SectionBodyProps = PermafrostComponent$1 & {
 };
 declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
 
-type Props$o = PermafrostComponent$1 & {
+type Props$n = PermafrostComponent$1 & {
     style?: object;
     children?: React$1.ReactNode;
 };
-declare const SectionHeader: (props: Props$o) => react_jsx_runtime.JSX.Element;
+declare const SectionHeader: (props: Props$n) => react_jsx_runtime.JSX.Element;
 
 declare const SectionTable: (props: any) => react_jsx_runtime.JSX.Element;
 
@@ -279,7 +279,7 @@ declare function Button$1(props: ButtonProps$1): React$1.ReactElement;
 type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 type ButtonSize = 'normal' | 'large';
 
-type Props$n = PermafrostComponent$1 & {
+type Props$m = PermafrostComponent$1 & {
     /**
      * Adjusts vertical alignment of the text label, in relation to the icon
      */
@@ -305,9 +305,9 @@ type Props$n = PermafrostComponent$1 & {
  *
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
  */
-declare function IconButton(props: Props$n): react_jsx_runtime.JSX.Element;
+declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
 
-type Props$m = PermafrostComponent$1 & {
+type Props$l = PermafrostComponent$1 & {
     defaultValue?: string;
     disabled?: boolean;
     horizontal?: boolean;
@@ -322,7 +322,7 @@ type Props$m = PermafrostComponent$1 & {
     value?: string | number;
     validationErrors?: string[];
 };
-declare const BorderSelect: (props: Props$m) => react_jsx_runtime.JSX.Element;
+declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps = {
     'aria-label'?: string;
@@ -370,7 +370,7 @@ type ComboboxOption = {
 type ComboboxSize = 'small' | 'medium';
 type ComboboxVariant = 'default' | 'light';
 
-type Props$l = PermafrostComponent$1 & {
+type Props$k = PermafrostComponent$1 & {
     disabled?: boolean;
     initialText?: string;
     options: {
@@ -384,7 +384,7 @@ type Props$l = PermafrostComponent$1 & {
     onChange(e: React$1.ChangeEvent<HTMLSelectElement>): void;
     onClick?(e: React$1.MouseEvent<HTMLDivElement, MouseEvent>): void;
 };
-declare const Select$1: (props: Props$l) => react_jsx_runtime.JSX.Element;
+declare const Select$1: (props: Props$k) => react_jsx_runtime.JSX.Element;
 
 /**
  * Multiselect combobox component. If selections are not bound to outside state
@@ -425,7 +425,7 @@ declare const SingleCombobox: React$1.ForwardRefExoticComponent<PermafrostCompon
     onChange: (selectedOption: ComboboxOption) => void;
 } & React$1.RefAttributes<unknown>>;
 
-type Props$k = PermafrostComponent$1 & {
+type Props$j = PermafrostComponent$1 & {
     children: React$1.ReactNode | string;
     minLength?: number;
     onUpdate?(newValue: string): void;
@@ -434,9 +434,9 @@ type Props$k = PermafrostComponent$1 & {
  * Wrapper component which enables text editing in place directly on a child component,
  * element, or plain text.
  */
-declare function EditableInput(props: Props$k): react_jsx_runtime.JSX.Element;
+declare function EditableInput(props: Props$j): react_jsx_runtime.JSX.Element;
 
-type Props$j = PermafrostComponent$1 & {
+type Props$i = PermafrostComponent$1 & {
     autoFocus?: boolean;
     decrement?(): void;
     disabled?: boolean;
@@ -456,9 +456,9 @@ type Props$j = PermafrostComponent$1 & {
  * Basic numeric input field. A label is required, but may be visually hidden
  * using the `hiddenLabel` property.
  */
-declare function NumberInput(props: Props$j): React$1.ReactElement;
+declare function NumberInput(props: Props$i): React$1.ReactElement;
 
-type Props$i = PermafrostComponent$1 & {
+type Props$h = PermafrostComponent$1 & {
     inputBorder?: boolean;
     showClearInputIcon?: boolean;
     showSearchIcon?: boolean;
@@ -471,9 +471,9 @@ type Props$i = PermafrostComponent$1 & {
     placeholder?: string;
     value?: string;
 };
-declare const SearchInput: (props: Props$i) => react_jsx_runtime.JSX.Element;
+declare const SearchInput: (props: Props$h) => react_jsx_runtime.JSX.Element;
 
-type Props$h = PermafrostComponent$1 & {
+type Props$g = PermafrostComponent$1 & {
     autoComplete?: 'email' | 'current-password' | 'new-password' | string;
     autoFocus?: boolean;
     defaultValue?: string;
@@ -494,9 +494,9 @@ type Props$h = PermafrostComponent$1 & {
     value?: string;
     readOnly?: boolean;
 };
-declare function TextInput(props: Props$h): React$1.ReactElement;
+declare function TextInput(props: Props$g): React$1.ReactElement;
 
-type Props$g = {
+type Props$f = {
     ['aria-label']: string;
     children?: React$1.ReactNode;
     hideFocusRing: boolean;
@@ -512,7 +512,7 @@ type Props$g = {
  * A group label must be included: either pass a string or markup into the
  * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
  */
-declare function RadioGroup$1({ children, ...props }: Props$g): react_jsx_runtime.JSX.Element;
+declare function RadioGroup$1({ children, ...props }: Props$f): react_jsx_runtime.JSX.Element;
 /**
  * A single radio button and its label.
  */
@@ -541,7 +541,7 @@ declare function Radio$1(props: AriaRadioProps & {
     isVisuallySelected?: (selectedValue: string) => void;
 }): react_jsx_runtime.JSX.Element;
 
-type Props$f = PermafrostComponent$1 & {
+type Props$e = PermafrostComponent$1 & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -553,9 +553,9 @@ type Props$f = PermafrostComponent$1 & {
     selected?: Date | undefined;
     value: Date | undefined;
 };
-declare const DatePicker: (props: Props$f) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: (props: Props$e) => react_jsx_runtime.JSX.Element;
 
-type Props$e = PermafrostComponent$1 & {
+type Props$d = PermafrostComponent$1 & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -572,32 +572,32 @@ type Props$e = PermafrostComponent$1 & {
     isOpen?: boolean;
     clearOnClose?: boolean;
 };
-declare const NoInputDatePicker: (props: Props$e) => react_jsx_runtime.JSX.Element;
+declare const NoInputDatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
 
-type Props$d = PermafrostComponent$1 & {
+type Props$c = PermafrostComponent$1 & {
     ariaLabel?: string;
     size?: IconSizes$1;
     style?: React$1.CSSProperties;
     fill?: string;
 };
-declare function CircleSpinner(props: Props$d): React$1.ReactElement;
+declare function CircleSpinner(props: Props$c): React$1.ReactElement;
 
-type Props$c = PermafrostComponent$1 & {
+type Props$b = PermafrostComponent$1 & {
     width?: string;
 };
-declare function BarSpinner(props: Props$c): React$1.ReactElement;
+declare function BarSpinner(props: Props$b): React$1.ReactElement;
 
-type Props$b = PermafrostComponent$1 & {
+type Props$a = PermafrostComponent$1 & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$b): React$1.ReactElement;
+declare function CirclePulse(props: Props$a): React$1.ReactElement;
 
 declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
 
-type Props$a = PermafrostComponent$1 & {
+type Props$9 = PermafrostComponent$1 & {
     backgroundColor?: string;
     foregroundColor?: string;
     ringRadius?: number;
@@ -606,11 +606,11 @@ type Props$a = PermafrostComponent$1 & {
     value: number;
     valueFontSize?: number;
 };
-declare function PercentageRing(props: Props$a): react_jsx_runtime.JSX.Element;
+declare function PercentageRing(props: Props$9): react_jsx_runtime.JSX.Element;
 
 declare const LoadingList: () => react_jsx_runtime.JSX.Element;
 
-type Props$9 = PermafrostComponent$1 & {
+type Props$8 = PermafrostComponent$1 & {
     accordion?: boolean;
     accordionDefaultOpen?: boolean;
     emptyListMessage?: string;
@@ -647,9 +647,9 @@ type Props$9 = PermafrostComponent$1 & {
     title: string;
     totalCount?: number;
 };
-declare const ListTable: (props: Props$9) => react_jsx_runtime.JSX.Element;
+declare const ListTable: (props: Props$8) => react_jsx_runtime.JSX.Element;
 
-type Props$8 = PermafrostComponent$1 & {
+type Props$7 = PermafrostComponent$1 & {
     currentPage: number;
     limit: number;
     pageInfo: {
@@ -664,9 +664,9 @@ type Props$8 = PermafrostComponent$1 & {
     getNextPage(cursor: number): void;
     getPreviousPage(cursor: number): void;
 };
-declare function Pagination(props: Props$8): react_jsx_runtime.JSX.Element;
+declare function Pagination(props: Props$7): react_jsx_runtime.JSX.Element;
 
-type Props$7 = PermafrostComponent$1 & {
+type Props$6 = PermafrostComponent$1 & {
     actionLink?: string;
     actionText?: string;
     buttonAction?(): void;
@@ -676,7 +676,7 @@ type Props$7 = PermafrostComponent$1 & {
         'data-cy': string;
     };
 };
-declare function Shrug(props: Props$7): React$1.ReactElement;
+declare function Shrug(props: Props$6): React$1.ReactElement;
 
 type ModalBaseProps = PermafrostComponent$1 & {
     children: React$1.ReactNode | React$1.ReactNode[];
@@ -703,7 +703,7 @@ type ModalBaseProps = PermafrostComponent$1 & {
  */
 declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
 
-type Props$6 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
+type Props$5 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
     describedBy?: string;
     clickOutsideHandler(e?: React$1.SyntheticEvent): void;
     confirmText?: string;
@@ -715,9 +715,9 @@ type Props$6 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
     title?: string | React$1.ReactNode;
     width?: number;
 };
-declare function ConfirmModal(props: Props$6): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal(props: Props$5): react_jsx_runtime.JSX.Element;
 
-type Props$5 = {
+type Props$4 = {
     children: React$1.ReactNode | React$1.ReactNode[];
     className?: string;
     isLoading?: boolean;
@@ -729,7 +729,7 @@ type Props$5 = {
  *
  * todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
  */
-declare function LoadingAwareContainer(props: Props$5): React$1.ReactElement;
+declare function LoadingAwareContainer(props: Props$4): React$1.ReactElement;
 
 interface TextTruncateProps {
     string: string;
@@ -739,7 +739,7 @@ interface TextTruncateProps {
 }
 declare function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps): react_jsx_runtime.JSX.Element;
 
-type Props$4 = {
+type Props$3 = {
     disabled: boolean;
     onChange: any;
     value: boolean;
@@ -748,9 +748,9 @@ type Props$4 = {
     checkedIconName?: IconName$1;
     notCheckedIconName?: IconName$1;
 } & PermafrostComponent$1;
-declare const Toggle$1: (props: Props$4) => react_jsx_runtime.JSX.Element;
+declare const Toggle$1: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
-type Props$3 = PermafrostComponent$1 & {
+type Props$2 = PermafrostComponent$1 & {
     questionMark?: boolean;
     for?: string | null;
     place?: string;
@@ -761,7 +761,7 @@ type Props$3 = PermafrostComponent$1 & {
     children: React$1.ReactNode;
     block?: boolean;
 };
-declare const Tooltip: (props: Props$3) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: (props: Props$2) => react_jsx_runtime.JSX.Element;
 
 declare const mix: (color_1: string, color_2: string, weight: number) => string;
 declare const shade: (color: string, percentage: number) => string;
@@ -856,7 +856,6 @@ declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.E
 declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
 
 type ButtonVariants = 'solid' | 'outline' | 'text';
-type ButtonColors = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 type ButtonIconPositions = 'left' | 'right';
 type ButtonSizes = 'sm' | 'md' | 'lg';
 type ButtonTypes = 'button' | 'submit' | 'reset';
@@ -871,7 +870,7 @@ interface ButtonProps {
     onClick?: (...args: any[]) => void;
     variant?: ButtonVariants;
     iconPosition?: ButtonIconPositions;
-    color?: ButtonColors;
+    color?: SemanticColor;
     size?: ButtonSizes;
     iconName?: IconName$1;
     type?: ButtonTypes;
@@ -900,6 +899,15 @@ type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'dir
     subHeaderAlign?: Alignment;
 };
 
+type PillSize = 'sm' | 'md' | 'lg';
+type PillColor = SemanticColor | 'neutral';
+interface PillProps {
+    children: React$1.ReactNode | React$1.ReactNode[];
+    color?: PillColor;
+    size?: PillSize;
+    className?: string;
+}
+
 type PermafrostComponent = {
     id?: string;
     className?: string;
@@ -1013,7 +1021,7 @@ interface PasswordInputProps extends WithLabelProps {
 }
 declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface SelectProps<OptionType extends SelectOption> extends Props$s<OptionType> {
+interface SelectProps<OptionType extends SelectOption> extends Props$r<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
@@ -1032,23 +1040,23 @@ interface FormProps {
 }
 declare const Form: ({ children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
 
-type Props$2 = {
+type Props$1 = {
     className?: string;
     height?: number;
     width?: number;
     isCircle?: boolean;
     isFullHeight?: boolean;
 };
-declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props$1) => react_jsx_runtime.JSX.Element;
 
-type Props$1 = {
+type Props = {
     className?: string;
     children: React$1.ReactNode;
     title?: string;
     subtitle?: string;
     hasBoxShadow?: boolean;
 };
-declare const Card: React$1.FC<Props$1>;
+declare const Card: React$1.FC<Props>;
 
 type PopperProps = {
     children: React$1.ReactNode;
@@ -1066,11 +1074,6 @@ type MenuProps = {
 };
 declare function Menu({ children }: MenuProps): react_jsx_runtime.JSX.Element;
 
-type Props = {
-    children: React.ReactNode | React.ReactNode[];
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
-    size?: 'sm' | 'md' | 'lg';
-};
-declare const Pill: ({ children, status, size, ...rest }: Props) => react_jsx_runtime.JSX.Element;
+declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
 
 export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Popper, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.js

@@ -42639,12 +42639,12 @@ const Tooltip = (props) => {
 };
 
 const Pill = (_a) => {
-    var { children, status = 'info', size = 'sm' } = _a, rest = __rest$1(_a, ["children", "status", "size"]);
-    const className = classNames('pill', {
-        [`pill--${status}`]: status,
+    var { children, className, color = 'info', size = 'sm' } = _a, rest = __rest$1(_a, ["children", "className", "color", "size"]);
+    const pillClasses = classNames('pill', className, {
+        [`pill--${color}`]: color,
         [`pill--${size}`]: size,
     });
-    return (jsx("div", Object.assign({ className: className }, rest, { children: children })));
+    return (jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
 };
 
 export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Card, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, LabeledInput as Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, Menu, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, LabeledPasswordInput as PasswordInput, PercentageRing, Pill, Popper, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, LabeledTextarea as Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };