@indico-data/design-system 1.0.54 → 1.0.56

package/lib/components/Toggle/Toggle.d.ts

@@ -0,0 +1,12 @@
+import { PermafrostComponent, IconName } from '@/types';
+type Props = {
+    disabled: boolean;
+    onChange: any;
+    value: boolean;
+    ['aria-label']?: string;
+    iconSize?: number | string;
+    checkedIconName?: IconName;
+    notCheckedIconName?: IconName;
+} & PermafrostComponent;
+export declare const Toggle: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+declare const meta: {
+    component: (props: {
+        disabled: boolean;
+        onChange: any;
+        value: boolean;
+        "aria-label"?: string | undefined;
+        iconSize?: string | number | undefined;
+        checkedIconName?: "checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list" | undefined;
+        notCheckedIconName?: "checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list" | undefined;
+    } & import("../../types").PermafrostComponent) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Normal: Story;
+export declare const Disabled: Story;
+export declare const Icons: Story;

package/lib/components/Toggle/Toggle.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledToggle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;

package/lib/components/Toggle/index.d.ts

@@ -0,0 +1 @@
+export { Toggle } from './Toggle';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PermafrostComponent } from '@/types';
+type Props = PermafrostComponent & {
+    questionMark?: boolean;
+    for?: string | null;
+    place?: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    questionMarkClassName?: string;
+    children: React.ReactNode;
+    block?: boolean;
+};
+export declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Single: Story;
+export declare const NoQuestionMark: Story;
+export declare const Bottom: Story;
+export declare const Right: Story;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTooltip: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

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

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PermafrostComponent } from '@/types';
+type Props = PermafrostComponent & {
+    questionMark?: boolean;
+    for?: string | null;
+    place?: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    questionMarkClassName?: string;
+    children: React.ReactNode;
+    block?: boolean;
+};
+export declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/lib/components/containment/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTooltip: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/containment/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/lib/components/index.d.ts

@@ -14,3 +14,4 @@ export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
 export { WizardWithSidebar } from './WizardWithSidebar';
 export { Drawer } from './Navigation/Drawer';
 export { TextTruncate } from './text-truncate';
+export { Toggle } from './Toggle';

package/lib/index.d.ts

@@ -301,12 +301,12 @@ declare const margin: {
 declare function decimalAdjust(type: any, value: any, exp: any): any;
 declare function round10(value: any, exp: any): any;
 declare function clamp(value: any, min: any, max: any): any;
-declare function numberWithCommas(x: any): any;
+declare function numberWithCommas$1(x: any): any;
 declare namespace MATH {
     export { decimalAdjust };
     export { round10 };
     export { clamp };
-    export { numberWithCommas };
+    export { numberWithCommas$1 as numberWithCommas };
 }
 
 declare const allColors: {
@@ -444,25 +444,25 @@ declare const allColors: {
     readonly backgroundColor: "#182432";
 };
 
-type Props$q = PermafrostComponent & {
+type Props$r = PermafrostComponent & {
     content: React__default.ReactNode;
     header?: React__default.ReactNode | string;
     open?: boolean;
 };
-declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
+declare const Accordion: (props: Props$r) => react_jsx_runtime.JSX.Element;
 
-type Props$p = PermafrostComponent & {
+type Props$q = PermafrostComponent & {
     style?: object;
     children: React__default.ReactNode;
 };
-declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
+declare const Section: (props: Props$q) => react_jsx_runtime.JSX.Element;
 
-type Props$o = PermafrostComponent & {
+type Props$p = PermafrostComponent & {
     title?: string;
     style?: object;
     children: React__default.ReactNode;
 };
-declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
+declare const SectionBlock: (props: Props$p) => react_jsx_runtime.JSX.Element;
 
 type SectionBodyProps = PermafrostComponent & {
     style?: object;
@@ -470,12 +470,12 @@ type SectionBodyProps = PermafrostComponent & {
 };
 declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
 
-type Props$n = PermafrostComponent & {
+type Props$o = PermafrostComponent & {
     style?: object;
     children?: React__default.ReactNode;
 };
 declare const SectionHeader: {
-    (props: Props$n): react_jsx_runtime.JSX.Element;
+    (props: Props$o): react_jsx_runtime.JSX.Element;
     defaultProps: {
         className: string;
         style: {};
@@ -507,7 +507,7 @@ declare function Button(props: ButtonProps): React__default.ReactElement;
 type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 type ButtonSize = 'normal' | 'large';
 
-type Props$m = PermafrostComponent & {
+type Props$n = PermafrostComponent & {
     /**
      * Adjusts vertical alignment of the text label, in relation to the icon
      */
@@ -533,9 +533,9 @@ type Props$m = PermafrostComponent & {
  *
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
  */
-declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
+declare function IconButton(props: Props$n): react_jsx_runtime.JSX.Element;
 
-type Props$l = PermafrostComponent & {
+type Props$m = PermafrostComponent & {
     defaultValue?: string;
     disabled?: boolean;
     horizontal?: boolean;
@@ -550,7 +550,7 @@ type Props$l = PermafrostComponent & {
     value?: string | number;
     validationErrors?: string[];
 };
-declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
+declare const BorderSelect: (props: Props$m) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps = {
     'aria-label'?: string;
@@ -598,7 +598,7 @@ type ComboboxOption = {
 type ComboboxSize = 'small' | 'medium';
 type ComboboxVariant = 'default' | 'light';
 
-type Props$k = PermafrostComponent & {
+type Props$l = PermafrostComponent & {
     disabled?: boolean;
     initialText?: string;
     options: {
@@ -612,7 +612,7 @@ type Props$k = PermafrostComponent & {
     onChange(e: React__default.ChangeEvent<HTMLSelectElement>): void;
     onClick?(e: React__default.MouseEvent<HTMLDivElement, MouseEvent>): void;
 };
-declare const Select: (props: Props$k) => react_jsx_runtime.JSX.Element;
+declare const Select: (props: Props$l) => react_jsx_runtime.JSX.Element;
 
 /**
  * Multiselect combobox component. If selections are not bound to outside state
@@ -653,7 +653,7 @@ declare const SingleCombobox: React__default.ForwardRefExoticComponent<Permafros
     onChange: (selectedOption: ComboboxOption) => void;
 } & React__default.RefAttributes<unknown>>;
 
-type Props$j = PermafrostComponent & {
+type Props$k = PermafrostComponent & {
     ariaLabel?: string;
     fill?: string;
     name: IconName;
@@ -666,9 +666,9 @@ type Props$j = PermafrostComponent & {
  * Generic icon component, hidden from Assistive Technology by default.
  * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
  */
-declare function Icon({ style, ...props }: Props$j): React__default.ReactElement | null;
+declare function Icon({ style, ...props }: Props$k): React__default.ReactElement | null;
 
-type Props$i = PermafrostComponent & {
+type Props$j = PermafrostComponent & {
     children: React__default.ReactNode | string;
     minLength?: number;
     onUpdate?(newValue: string): void;
@@ -677,9 +677,9 @@ type Props$i = PermafrostComponent & {
  * 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 & {
+type Props$i = PermafrostComponent & {
     autoFocus?: boolean;
     decrement?(): void;
     disabled?: boolean;
@@ -699,9 +699,9 @@ type Props$h = PermafrostComponent & {
  * Basic numeric input field. A label is required, but may be visually hidden
  * using the `hiddenLabel` property.
  */
-declare function NumberInput(props: Props$h): React__default.ReactElement;
+declare function NumberInput(props: Props$i): React__default.ReactElement;
 
-type Props$g = PermafrostComponent & {
+type Props$h = PermafrostComponent & {
     border?: boolean;
     showClearInputIcon?: boolean;
     showSearchIcon?: boolean;
@@ -715,13 +715,13 @@ type Props$g = PermafrostComponent & {
     value?: string;
 };
 declare const SearchInput: {
-    (props: Props$g): react_jsx_runtime.JSX.Element;
+    (props: Props$h): react_jsx_runtime.JSX.Element;
     defaultProps: {
         className: string;
     };
 };
 
-type Props$f = PermafrostComponent & {
+type Props$g = PermafrostComponent & {
     autoComplete?: 'email' | 'current-password' | 'new-password' | string;
     autoFocus?: boolean;
     defaultValue?: string;
@@ -742,9 +742,9 @@ type Props$f = PermafrostComponent & {
     value?: string;
     readOnly?: boolean;
 };
-declare function TextInput(props: Props$f): React__default.ReactElement;
+declare function TextInput(props: Props$g): React__default.ReactElement;
 
-type Props$e = {
+type Props$f = {
     ['aria-label']: string;
     children?: React__default.ReactNode;
     hideFocusRing: boolean;
@@ -760,7 +760,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.
  */
@@ -789,7 +789,7 @@ declare function Radio(props: AriaRadioProps & {
     isVisuallySelected?: (selectedValue: string) => void;
 }): react_jsx_runtime.JSX.Element;
 
-type Props$d = PermafrostComponent & {
+type Props$e = PermafrostComponent & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -801,9 +801,9 @@ type Props$d = PermafrostComponent & {
     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 & {
+type Props$d = PermafrostComponent & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -820,9 +820,9 @@ type Props$c = PermafrostComponent & {
     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 & {
+type Props$c = PermafrostComponent & {
     ariaLabel?: string;
     size?: string;
     style?: {
@@ -830,24 +830,24 @@ type Props$b = PermafrostComponent & {
     };
     fill?: string;
 };
-declare function CircleSpinner(props: Props$b): React__default.ReactElement;
+declare function CircleSpinner(props: Props$c): React__default.ReactElement;
 
-type Props$a = PermafrostComponent & {
+type Props$b = PermafrostComponent & {
     width?: string;
 };
-declare function BarSpinner(props: Props$a): React__default.ReactElement;
+declare function BarSpinner(props: Props$b): React__default.ReactElement;
 
-type Props$9 = PermafrostComponent & {
+type Props$a = PermafrostComponent & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$9): React__default.ReactElement;
+declare function CirclePulse(props: Props$a): React__default.ReactElement;
 
 declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
 
-type Props$8 = PermafrostComponent & {
+type Props$9 = PermafrostComponent & {
     backgroundColor?: string;
     foregroundColor?: string;
     ringRadius?: number;
@@ -856,11 +856,11 @@ type Props$8 = PermafrostComponent & {
     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 & {
+type Props$8 = PermafrostComponent & {
     accordion?: boolean;
     accordionDefaultOpen?: boolean;
     emptyListMessage?: string;
@@ -897,9 +897,9 @@ type Props$7 = PermafrostComponent & {
     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 & {
+type Props$7 = PermafrostComponent & {
     currentPage: number;
     limit: number;
     pageInfo: {
@@ -914,9 +914,9 @@ type Props$6 = PermafrostComponent & {
     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 & {
+type Props$6 = PermafrostComponent & {
     actionLink?: string;
     actionText?: string;
     buttonAction?(): void;
@@ -926,7 +926,7 @@ type Props$5 = PermafrostComponent & {
         'data-cy': string;
     };
 };
-declare function Shrug(props: Props$5): React__default.ReactElement;
+declare function Shrug(props: Props$6): React__default.ReactElement;
 
 type ModalBaseProps = PermafrostComponent & {
     children: React__default.ReactNode | React__default.ReactNode[];
@@ -954,7 +954,7 @@ type ModalBaseProps = PermafrostComponent & {
  */
 declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
 
-type Props$4 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
+type Props$5 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
     describedBy?: string;
     clickOutsideHandler(e?: React__default.SyntheticEvent): void;
     confirmText?: string;
@@ -966,9 +966,9 @@ type Props$4 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
     title?: string | React__default.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__default.ReactNode | React__default.ReactNode[];
     className?: string;
     isLoading?: boolean;
@@ -980,7 +980,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__default.ReactElement;
+declare function LoadingAwareContainer(props: Props$4): React__default.ReactElement;
 
 type CancelText$1 = {
     confirmText: string;
@@ -988,7 +988,7 @@ type CancelText$1 = {
     rejectText: string;
     title: string;
 };
-type Props$2 = PermafrostComponent & {
+type Props$3 = PermafrostComponent & {
     children: React__default.ReactNode;
     /**
      * text for the cancel confirmation modal
@@ -1026,7 +1026,7 @@ type Props$2 = PermafrostComponent & {
         'data-cy': string;
     };
 };
-declare function Wizard(props: Props$2): react_jsx_runtime.JSX.Element;
+declare function Wizard(props: Props$3): react_jsx_runtime.JSX.Element;
 
 declare const StyledWizard: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 declare const WizardCard: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -1038,7 +1038,7 @@ type CancelText = {
     rejectText: string;
     title: string;
 };
-type Props$1 = PermafrostComponent & {
+type Props$2 = PermafrostComponent & {
     children: React__default.ReactNode;
     /**
      * text for the cancel confirmation modal
@@ -1086,7 +1086,7 @@ type Props$1 = PermafrostComponent & {
     color?: string;
     buttonColor?: string;
 };
-declare function WizardWithSidebar(props: Props$1): react_jsx_runtime.JSX.Element;
+declare function WizardWithSidebar(props: Props$2): react_jsx_runtime.JSX.Element;
 
 type ListItem = {
     id: string;
@@ -1095,7 +1095,7 @@ type ListItem = {
     path: string;
 };
 
-type Props = PermafrostComponent & {
+type Props$1 = PermafrostComponent & {
     style?: React__default.CSSProperties;
     logoText?: string;
     logoIcon?: IconName;
@@ -1105,7 +1105,7 @@ type Props = PermafrostComponent & {
     $expandedWidth?: string;
     $collapsedWidth?: string;
 };
-declare const Drawer: (props: Props) => react_jsx_runtime.JSX.Element;
+declare const Drawer: (props: Props$1) => react_jsx_runtime.JSX.Element;
 
 interface TextTruncateProps {
     string: string;
@@ -1114,4 +1114,101 @@ interface TextTruncateProps {
 }
 declare function TextTruncate({ string, maxChars, children }: TextTruncateProps): react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
+type Props = {
+    disabled: boolean;
+    onChange: any;
+    value: boolean;
+    ['aria-label']?: string;
+    iconSize?: number | string;
+    checkedIconName?: IconName;
+    notCheckedIconName?: IconName;
+} & PermafrostComponent;
+declare const Toggle: (props: Props) => 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;
+declare const tint: (color: string, percentage: number) => string;
+/**
+ * Converts hex color values to rgb or rgba values if a opacity is supplied
+ * @param hex
+ * @returns {*}
+ */
+declare const hexToRgb: (hex: string, opacity?: number) => string | undefined;
+/**
+ * Takes a 3- or 6-character hex color value, and returns an object containing
+ * its equivalent HSL values.
+ *
+ * @see {@link https://css-tricks.com/converting-color-spaces-in-javascript/}
+ * @see {@link https://gist.github.com/mjackson/5311256}
+ */
+declare function hexToHsl(hexColor: string): {
+    hue: number;
+    saturation: number;
+    lightness: number;
+};
+
+declare const color_d_hexToHsl: typeof hexToHsl;
+declare const color_d_hexToRgb: typeof hexToRgb;
+declare const color_d_mix: typeof mix;
+declare const color_d_shade: typeof shade;
+declare const color_d_tint: typeof tint;
+declare namespace color_d {
+  export { color_d_hexToHsl as hexToHsl, color_d_hexToRgb as hexToRgb, color_d_mix as mix, color_d_shade as shade, color_d_tint as tint };
+}
+
+declare const camelCaseToUpperUnderscore: (string: string) => string;
+declare const camelCaseToSpaceUpper: (string: string) => string;
+declare const underscoreToCapitalize: (string: string) => string;
+declare const snakeCaseToCamelCase: (string: string) => string;
+declare function capitalize(string: string): string;
+declare function capitalizeFirstOnly(string: string): string;
+/**
+ * Generates a random string of English alphabet characters. Defaults to a length of 8.
+ */
+declare function createRandomString(length?: number): string;
+declare const maxLengthWithEllipse: (string: string, maxLength: number) => string;
+declare const maxLengthWithMiddleEllipsis: (string: string, maxLength: number) => string;
+
+declare const string_d_camelCaseToSpaceUpper: typeof camelCaseToSpaceUpper;
+declare const string_d_camelCaseToUpperUnderscore: typeof camelCaseToUpperUnderscore;
+declare const string_d_capitalize: typeof capitalize;
+declare const string_d_capitalizeFirstOnly: typeof capitalizeFirstOnly;
+declare const string_d_createRandomString: typeof createRandomString;
+declare const string_d_maxLengthWithEllipse: typeof maxLengthWithEllipse;
+declare const string_d_maxLengthWithMiddleEllipsis: typeof maxLengthWithMiddleEllipsis;
+declare const string_d_snakeCaseToCamelCase: typeof snakeCaseToCamelCase;
+declare const string_d_underscoreToCapitalize: typeof underscoreToCapitalize;
+declare namespace string_d {
+  export { string_d_camelCaseToSpaceUpper as camelCaseToSpaceUpper, string_d_camelCaseToUpperUnderscore as camelCaseToUpperUnderscore, string_d_capitalize as capitalize, string_d_capitalizeFirstOnly as capitalizeFirstOnly, string_d_createRandomString as createRandomString, string_d_maxLengthWithEllipse as maxLengthWithEllipse, string_d_maxLengthWithMiddleEllipsis as maxLengthWithMiddleEllipsis, string_d_snakeCaseToCamelCase as snakeCaseToCamelCase, string_d_underscoreToCapitalize as underscoreToCapitalize };
+}
+
+/**
+ * Takes a number and formats it nicely.
+ *
+ * @example numberWithCommas(12345)
+ * // returns 12,345
+ */
+declare function numberWithCommas(value: number): string;
+/**
+ * Takes a number and returns it, rounded up to the maximum decimal places specified.
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 2)
+ * // returns 0.17
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 3)
+ * // returns 0.169
+ *
+ * @example maxDecimalPlaces(12.902, 2)
+ * // returns 12.9
+ */
+declare function maxDecimalPlaces(value: number, decimalPlaces: number): number;
+declare function formatConfidence(confidence: number): number;
+
+declare const number_d_formatConfidence: typeof formatConfidence;
+declare const number_d_maxDecimalPlaces: typeof maxDecimalPlaces;
+declare const number_d_numberWithCommas: typeof numberWithCommas;
+declare namespace number_d {
+  export { number_d_formatConfidence as formatConfidence, number_d_maxDecimalPlaces as maxDecimalPlaces, number_d_numberWithCommas as numberWithCommas };
+}
+
+export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, color_d as colorUtils, faIcons, indicons, number_d as numberUtils, string_d as stringUtils };