@indico-data/design-system 2.14.0 → 2.15.1

package/lib/index.css

@@ -243,6 +243,12 @@
   --pf-negative-margin-16: -64px;
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -1559,6 +1565,47 @@ form {
   }
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-card-background-color: var(--pf-white-color);
+  --pf-card-text-color: var(--pf-gray-color);
+  --pf-card-border-color: var(--pf-gray-color);
+  --pf-card-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-card-background-color: var(--pf-primary-color);
+  --pf-card-border-color: var(--pf-primary-color-200);
+  --pf-card-text-color: var(--pf-gray-color-100);
+}
+
+.card {
+  border-radius: var(--pf-rounded);
+  padding: var(--pf-padding-3);
+  background: var(--pf-card-background-color);
+  border: var(--pf-border-sm) solid var(--pf-card-border-color);
+  box-sizing: border-box;
+}
+
+.card__header {
+  margin-bottom: var(--pf-margin-2);
+}
+.card__header p {
+  font-size: var(--pf-font-size-subtitle2);
+}
+
+.card__content hr {
+  border: var(--pf-border-thin) solid var(--pf-card-border-color);
+  border-bottom: none;
+  margin-bottom: var(--pf-margin-3);
+  margin-top: var(--pf-margin-3);
+}
+
+.card--box-shadow {
+  box-shadow: var(--pf-dropshadow);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.d.ts

@@ -7,7 +7,7 @@ import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupPro
 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$q } from 'react-select';
+import { Props as Props$r } from 'react-select';
 
 declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
 
@@ -221,25 +221,25 @@ declare const allColors: {
     readonly backgroundColor: "#182432";
 };
 
-type Props$p = PermafrostComponent$1 & {
+type Props$q = PermafrostComponent$1 & {
     content: React$1.ReactNode;
     header?: React$1.ReactNode | string;
     open?: boolean;
 };
-declare const Accordion: (props: Props$p) => react_jsx_runtime.JSX.Element;
+declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
 
-type Props$o = PermafrostComponent$1 & {
+type Props$p = PermafrostComponent$1 & {
     style?: object;
     children: React$1.ReactNode;
 };
-declare const Section: (props: Props$o) => react_jsx_runtime.JSX.Element;
+declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
 
-type Props$n = PermafrostComponent$1 & {
+type Props$o = PermafrostComponent$1 & {
     title?: string;
     style?: object;
     children: React$1.ReactNode;
 };
-declare const SectionBlock: (props: Props$n) => react_jsx_runtime.JSX.Element;
+declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
 
 type SectionBodyProps = PermafrostComponent$1 & {
     style?: object;
@@ -247,17 +247,11 @@ type SectionBodyProps = PermafrostComponent$1 & {
 };
 declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
 
-type Props$m = PermafrostComponent$1 & {
+type Props$n = PermafrostComponent$1 & {
     style?: object;
     children?: React$1.ReactNode;
 };
-declare const SectionHeader: {
-    (props: Props$m): react_jsx_runtime.JSX.Element;
-    defaultProps: {
-        className: string;
-        style: {};
-    };
-};
+declare const SectionHeader: (props: Props$n) => react_jsx_runtime.JSX.Element;
 
 declare const SectionTable: (props: any) => react_jsx_runtime.JSX.Element;
 
@@ -284,7 +278,7 @@ declare function Button$1(props: ButtonProps$1): React$1.ReactElement;
 type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 type ButtonSize = 'normal' | 'large';
 
-type Props$l = PermafrostComponent$1 & {
+type Props$m = PermafrostComponent$1 & {
     /**
      * Adjusts vertical alignment of the text label, in relation to the icon
      */
@@ -310,9 +304,9 @@ type Props$l = PermafrostComponent$1 & {
  *
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
  */
-declare function IconButton(props: Props$l): react_jsx_runtime.JSX.Element;
+declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
 
-type Props$k = PermafrostComponent$1 & {
+type Props$l = PermafrostComponent$1 & {
     defaultValue?: string;
     disabled?: boolean;
     horizontal?: boolean;
@@ -327,7 +321,7 @@ type Props$k = PermafrostComponent$1 & {
     value?: string | number;
     validationErrors?: string[];
 };
-declare const BorderSelect: (props: Props$k) => react_jsx_runtime.JSX.Element;
+declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps = {
     'aria-label'?: string;
@@ -375,7 +369,7 @@ type ComboboxOption = {
 type ComboboxSize = 'small' | 'medium';
 type ComboboxVariant = 'default' | 'light';
 
-type Props$j = PermafrostComponent$1 & {
+type Props$k = PermafrostComponent$1 & {
     disabled?: boolean;
     initialText?: string;
     options: {
@@ -389,7 +383,7 @@ type Props$j = PermafrostComponent$1 & {
     onChange(e: React$1.ChangeEvent<HTMLSelectElement>): void;
     onClick?(e: React$1.MouseEvent<HTMLDivElement, MouseEvent>): void;
 };
-declare const Select$1: (props: Props$j) => 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
@@ -430,7 +424,7 @@ declare const SingleCombobox: React$1.ForwardRefExoticComponent<PermafrostCompon
     onChange: (selectedOption: ComboboxOption) => void;
 } & React$1.RefAttributes<unknown>>;
 
-type Props$i = PermafrostComponent$1 & {
+type Props$j = PermafrostComponent$1 & {
     children: React$1.ReactNode | string;
     minLength?: number;
     onUpdate?(newValue: string): void;
@@ -439,9 +433,9 @@ type Props$i = PermafrostComponent$1 & {
  * Wrapper component which enables text editing in place directly on a child component,
  * element, or plain text.
  */
-declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
+declare function EditableInput(props: Props$j): react_jsx_runtime.JSX.Element;
 
-type Props$h = PermafrostComponent$1 & {
+type Props$i = PermafrostComponent$1 & {
     autoFocus?: boolean;
     decrement?(): void;
     disabled?: boolean;
@@ -461,9 +455,9 @@ type Props$h = PermafrostComponent$1 & {
  * Basic numeric input field. A label is required, but may be visually hidden
  * using the `hiddenLabel` property.
  */
-declare function NumberInput(props: Props$h): React$1.ReactElement;
+declare function NumberInput(props: Props$i): React$1.ReactElement;
 
-type Props$g = PermafrostComponent$1 & {
+type Props$h = PermafrostComponent$1 & {
     inputBorder?: boolean;
     showClearInputIcon?: boolean;
     showSearchIcon?: boolean;
@@ -476,14 +470,9 @@ type Props$g = PermafrostComponent$1 & {
     placeholder?: string;
     value?: string;
 };
-declare const SearchInput: {
-    (props: Props$g): react_jsx_runtime.JSX.Element;
-    defaultProps: {
-        className: string;
-    };
-};
+declare const SearchInput: (props: Props$h) => react_jsx_runtime.JSX.Element;
 
-type Props$f = PermafrostComponent$1 & {
+type Props$g = PermafrostComponent$1 & {
     autoComplete?: 'email' | 'current-password' | 'new-password' | string;
     autoFocus?: boolean;
     defaultValue?: string;
@@ -504,9 +493,9 @@ type Props$f = PermafrostComponent$1 & {
     value?: string;
     readOnly?: boolean;
 };
-declare function TextInput(props: Props$f): React$1.ReactElement;
+declare function TextInput(props: Props$g): React$1.ReactElement;
 
-type Props$e = {
+type Props$f = {
     ['aria-label']: string;
     children?: React$1.ReactNode;
     hideFocusRing: boolean;
@@ -522,7 +511,7 @@ type Props$e = {
  * 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$e): 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.
  */
@@ -551,7 +540,7 @@ declare function Radio$1(props: AriaRadioProps & {
     isVisuallySelected?: (selectedValue: string) => void;
 }): react_jsx_runtime.JSX.Element;
 
-type Props$d = PermafrostComponent$1 & {
+type Props$e = PermafrostComponent$1 & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -563,9 +552,9 @@ type Props$d = PermafrostComponent$1 & {
     selected?: Date | undefined;
     value: Date | undefined;
 };
-declare const DatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: (props: Props$e) => react_jsx_runtime.JSX.Element;
 
-type Props$c = PermafrostComponent$1 & {
+type Props$d = PermafrostComponent$1 & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -582,32 +571,32 @@ type Props$c = PermafrostComponent$1 & {
     isOpen?: boolean;
     clearOnClose?: boolean;
 };
-declare const NoInputDatePicker: (props: Props$c) => react_jsx_runtime.JSX.Element;
+declare const NoInputDatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
 
-type Props$b = PermafrostComponent$1 & {
+type Props$c = PermafrostComponent$1 & {
     ariaLabel?: string;
     size?: IconSizes$1;
     style?: React$1.CSSProperties;
     fill?: string;
 };
-declare function CircleSpinner(props: Props$b): React$1.ReactElement;
+declare function CircleSpinner(props: Props$c): React$1.ReactElement;
 
-type Props$a = PermafrostComponent$1 & {
+type Props$b = PermafrostComponent$1 & {
     width?: string;
 };
-declare function BarSpinner(props: Props$a): React$1.ReactElement;
+declare function BarSpinner(props: Props$b): React$1.ReactElement;
 
-type Props$9 = PermafrostComponent$1 & {
+type Props$a = PermafrostComponent$1 & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$9): React$1.ReactElement;
+declare function CirclePulse(props: Props$a): React$1.ReactElement;
 
 declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
 
-type Props$8 = PermafrostComponent$1 & {
+type Props$9 = PermafrostComponent$1 & {
     backgroundColor?: string;
     foregroundColor?: string;
     ringRadius?: number;
@@ -616,11 +605,11 @@ type Props$8 = PermafrostComponent$1 & {
     value: number;
     valueFontSize?: number;
 };
-declare function PercentageRing(props: Props$8): 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$7 = PermafrostComponent$1 & {
+type Props$8 = PermafrostComponent$1 & {
     accordion?: boolean;
     accordionDefaultOpen?: boolean;
     emptyListMessage?: string;
@@ -657,9 +646,9 @@ type Props$7 = PermafrostComponent$1 & {
     title: string;
     totalCount?: number;
 };
-declare const ListTable: (props: Props$7) => react_jsx_runtime.JSX.Element;
+declare const ListTable: (props: Props$8) => react_jsx_runtime.JSX.Element;
 
-type Props$6 = PermafrostComponent$1 & {
+type Props$7 = PermafrostComponent$1 & {
     currentPage: number;
     limit: number;
     pageInfo: {
@@ -674,9 +663,9 @@ type Props$6 = PermafrostComponent$1 & {
     getNextPage(cursor: number): void;
     getPreviousPage(cursor: number): void;
 };
-declare function Pagination(props: Props$6): react_jsx_runtime.JSX.Element;
+declare function Pagination(props: Props$7): react_jsx_runtime.JSX.Element;
 
-type Props$5 = PermafrostComponent$1 & {
+type Props$6 = PermafrostComponent$1 & {
     actionLink?: string;
     actionText?: string;
     buttonAction?(): void;
@@ -686,7 +675,7 @@ type Props$5 = PermafrostComponent$1 & {
         'data-cy': string;
     };
 };
-declare function Shrug(props: Props$5): React$1.ReactElement;
+declare function Shrug(props: Props$6): React$1.ReactElement;
 
 type ModalBaseProps = PermafrostComponent$1 & {
     children: React$1.ReactNode | React$1.ReactNode[];
@@ -714,7 +703,7 @@ type ModalBaseProps = PermafrostComponent$1 & {
  */
 declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
 
-type Props$4 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
+type Props$5 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
     describedBy?: string;
     clickOutsideHandler(e?: React$1.SyntheticEvent): void;
     confirmText?: string;
@@ -726,9 +715,9 @@ type Props$4 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
     title?: string | React$1.ReactNode;
     width?: number;
 };
-declare function ConfirmModal(props: Props$4): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal(props: Props$5): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     children: React$1.ReactNode | React$1.ReactNode[];
     className?: string;
     isLoading?: boolean;
@@ -740,7 +729,7 @@ type Props$3 = {
  *
  * 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$3): React$1.ReactElement;
+declare function LoadingAwareContainer(props: Props$4): React$1.ReactElement;
 
 interface TextTruncateProps {
     string: string;
@@ -750,7 +739,7 @@ interface TextTruncateProps {
 }
 declare function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps): react_jsx_runtime.JSX.Element;
 
-type Props$2 = {
+type Props$3 = {
     disabled: boolean;
     onChange: any;
     value: boolean;
@@ -759,9 +748,9 @@ type Props$2 = {
     checkedIconName?: IconName$1;
     notCheckedIconName?: IconName$1;
 } & PermafrostComponent$1;
-declare const Toggle$1: (props: Props$2) => react_jsx_runtime.JSX.Element;
+declare const Toggle$1: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
-type Props$1 = PermafrostComponent$1 & {
+type Props$2 = PermafrostComponent$1 & {
     questionMark?: boolean;
     for?: string | null;
     place?: string;
@@ -772,7 +761,7 @@ type Props$1 = PermafrostComponent$1 & {
     children: React$1.ReactNode;
     block?: boolean;
 };
-declare const Tooltip: (props: Props$1) => 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;
@@ -1026,7 +1015,7 @@ interface PasswordInputProps {
 }
 declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-interface SelectProps<OptionType extends SelectOption> extends Props$q<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;
@@ -1045,13 +1034,22 @@ interface FormProps {
 }
 declare const Form: ({ children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
 
-type Props = {
+type Props$1 = {
     className?: string;
     height?: number;
     width?: number;
     isCircle?: boolean;
     isFullHeight?: boolean;
 };
-declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props) => react_jsx_runtime.JSX.Element;
+declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type Props = {
+    className?: string;
+    children: React$1.ReactNode;
+    title?: string;
+    subtitle?: string;
+    hasBoxShadow?: boolean;
+};
+declare const Card: React$1.FC<Props>;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, 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, Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+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, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, 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, Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -243,6 +243,12 @@
   --pf-negative-margin-16: -64px;
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -1559,6 +1565,47 @@ form {
   }
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-card-background-color: var(--pf-white-color);
+  --pf-card-text-color: var(--pf-gray-color);
+  --pf-card-border-color: var(--pf-gray-color);
+  --pf-card-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-card-background-color: var(--pf-primary-color);
+  --pf-card-border-color: var(--pf-primary-color-200);
+  --pf-card-text-color: var(--pf-gray-color-100);
+}
+
+.card {
+  border-radius: var(--pf-rounded);
+  padding: var(--pf-padding-3);
+  background: var(--pf-card-background-color);
+  border: var(--pf-border-sm) solid var(--pf-card-border-color);
+  box-sizing: border-box;
+}
+
+.card__header {
+  margin-bottom: var(--pf-margin-2);
+}
+.card__header p {
+  font-size: var(--pf-font-size-subtitle2);
+}
+
+.card__content hr {
+  border: var(--pf-border-thin) solid var(--pf-card-border-color);
+  border-bottom: none;
+  margin-bottom: var(--pf-margin-3);
+  margin-top: var(--pf-margin-3);
+}
+
+.card--box-shadow {
+  box-shadow: var(--pf-dropshadow);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.esm.js

@@ -18722,6 +18722,12 @@ const Skeleton = (_a) => {
     return jsx("div", Object.assign({ className: combinedClassName, style: dynamicStyle }, rest));
 };
 
+const Card = (_a) => {
+    var { className = '', children, title, subtitle, hasBoxShadow = false } = _a, rest = __rest$1(_a, ["className", "children", "title", "subtitle", "hasBoxShadow"]);
+    const cardClasses = y$1('card', { 'card--box-shadow': hasBoxShadow }, className);
+    return (jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxs("div", { className: "card__header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), jsx("div", { className: "card__content", children: children })] })));
+};
+
 const StyledAccordion = styled.details `
   summary {
     display: inherit;
@@ -18814,13 +18820,9 @@ const StyledSectionHeader = styled.header `
 `;
 
 const SectionHeader = (props) => {
-    const { className, style, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
+    const { className = '', style = {}, children, id } = props, restOfProps = __rest$1(props, ["className", "style", "children", "id"]);
     return (jsx(StyledSectionHeader, Object.assign({ className: y$1('SectionHeader', className), "data-cy": props['data-cy'], id: id, style: style }, restOfProps, { children: children })));
 };
-SectionHeader.defaultProps = {
-    className: '',
-    style: {},
-};
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -23212,7 +23214,7 @@ const StyledSearchField = styled.div `
 `;
 
 const SearchInput = (props) => {
-    const { id, inputBorder, showSearchIcon, showClearInputIcon, className, inputProps, onChange, onClear, onKeyUp, placeholder, value, } = props;
+    const { id, inputBorder, showSearchIcon, showClearInputIcon, className = '', inputProps, onChange, onClear, onKeyUp, placeholder, value, } = props;
     const getId = id ? id : v4();
     return (jsxs(StyledSearchField, { className: y$1(className, {
             inputBorder,
@@ -23220,9 +23222,6 @@ const SearchInput = (props) => {
             showClearInputIcon,
         }), "data-cy": props['data-cy'], children: [showSearchIcon && (jsx("label", { htmlFor: getId, children: jsx(Icon, { name: "fa-search", ariaLabel: "search" }) })), jsx("input", Object.assign({ "data-testid": props['data-testid'], type: "search", id: getId, placeholder: placeholder, value: value, onChange: onChange, onKeyUp: onKeyUp }, inputProps)), showClearInputIcon && (jsx(Icon, { name: "x-close", ariaLabel: "clear input", className: "clear-input", onClick: onClear }))] }));
 };
-SearchInput.defaultProps = {
-    className: '',
-};
 
 const StyledTextInput = styled.div `
   position: relative;
@@ -41543,5 +41542,5 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.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, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, 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, Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+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, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, 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, Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map