@indico-data/design-system 1.0.57 → 2.0.0

package/lib/{components → legacy/components}/Accordion/Accordion.stories.d.ts

@@ -2,14 +2,14 @@ import React from 'react';
 import type { StoryObj } from '@storybook/react';
 import { Accordion } from './Accordion';
 declare const meta: {
-    component: (props: import("../../types").PermafrostComponent & {
+    component: (props: import("../../../types").PermafrostComponent & {
         content: React.ReactNode;
         header?: React.ReactNode;
         open?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     title: string;
     argTypes: {};
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
         id?: string | undefined;
         className?: string | undefined;
         'data-cy'?: string | undefined;

package/lib/legacy/components/Icon/Icon.stories.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Icon } from './Icon';
+declare const meta: {
+    component: typeof Icon;
+    title: string;
+    argTypes: {
+        ariaLabel: {
+            control: {
+                disable: boolean;
+            };
+        };
+        size: {
+            description: string;
+        };
+        name: {
+            control: {
+                type: string;
+                options: ("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" | "checkbox" | "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" | "ellipsis" | "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" | "help" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "menu" | "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" | "pointer" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "reset" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "text" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "zoom-in" | "zoom-out" | "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")[];
+            };
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
+        id?: string | undefined;
+        className?: string | undefined;
+        'data-cy'?: string | undefined;
+        'data-testid'?: string | undefined;
+        ariaLabel?: string | undefined;
+        fill?: string | undefined;
+        name: "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" | "checkbox" | "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" | "ellipsis" | "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" | "help" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "menu" | "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" | "pointer" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "reset" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "text" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "zoom-in" | "zoom-out" | "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";
+        size?: [string | number] | [string | number, string | number] | undefined;
+        style?: any;
+        onClick?: (() => void) | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const General: Story;
+export declare const Indicon: Story;
+export declare const FontAwesome: Story;
+export declare const SizeSpecified: Story;

package/lib/{components → legacy/components}/ListTable/ListTable.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { StoryObj } from '@storybook/react';
 import { ListTable } from './ListTable';
 declare const meta: {
-    component: (props: import("../../types").PermafrostComponent & {
+    component: (props: import("../../../types").PermafrostComponent & {
         accordion?: boolean | undefined;
         accordionDefaultOpen?: boolean | undefined;
         emptyListMessage?: string | undefined;

package/lib/{components → legacy/components}/Navigation/Drawer/Drawer.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconName, PermafrostComponent } from '@/types';
 import { ListItem } from './types';
+import './Drawer.scss';
 type Props = PermafrostComponent & {
     style?: React.CSSProperties;
     logoText?: string;
@@ -8,8 +9,8 @@ type Props = PermafrostComponent & {
     headerComponent?: React.ReactNode;
     navigationItems?: ListItem[];
     footerItems?: ListItem[];
-    $expandedWidth?: string;
-    $collapsedWidth?: string;
+    expandedWidth?: string;
+    collapsedWidth?: string;
 };
 export declare const Drawer: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/{components → legacy/components}/Navigation/Drawer/Drawer.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Drawer } from '@/components/Navigation/Drawer';
+import { Drawer } from '@/legacy/components/Navigation/Drawer';
 declare const meta: Meta<typeof Drawer>;
 export default meta;
 type Story = StoryObj<typeof Drawer>;

package/lib/legacy/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?: "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" | "checkbox" | "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" | "ellipsis" | "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" | "help" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "menu" | "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" | "pointer" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "reset" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "text" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "zoom-in" | "zoom-out" | "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?: "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" | "checkbox" | "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" | "ellipsis" | "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" | "help" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "menu" | "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" | "pointer" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "reset" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "text" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "zoom-in" | "zoom-out" | "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 → legacy/components}/basic-section/Section/Section.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 import { Section } from './Section';
 declare const meta: {
-    component: (props: import("../../../types").PermafrostComponent & {
+    component: (props: import("../../../../types").PermafrostComponent & {
         style?: object | undefined;
         children: import("react").ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;

package/lib/{components → legacy/components}/basic-section/SectionHeader/SectionHeader.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
 import { SectionHeader } from './SectionHeader';
 declare const meta: {
     component: {
-        (props: import("../../../types").PermafrostComponent & {
+        (props: import("../../../../types").PermafrostComponent & {
             style?: object | undefined;
             children?: React.ReactNode;
         }): import("react/jsx-runtime").JSX.Element;

package/lib/{components → legacy/components}/dropdowns/BorderSelect/BorderSelect.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 import { BorderSelect } from './BorderSelect';
 declare const meta: {
-    component: (props: import("../../../types").PermafrostComponent & {
+    component: (props: import("../../../../types").PermafrostComponent & {
         defaultValue?: string | undefined;
         disabled?: boolean | undefined;
         horizontal?: boolean | undefined;

package/lib/{components → legacy/components}/dropdowns/MultiCombobox/MultiCombobox.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
 import { ComboboxOption } from '../types';
 import { MultiCombobox } from './MultiCombobox';
 declare const meta: {
-    component: React.ForwardRefExoticComponent<import("../../../types").PermafrostComponent & import("../types").ComboboxProps & {
+    component: React.ForwardRefExoticComponent<import("../../../../types").PermafrostComponent & import("../types").ComboboxProps & {
         multiValueProps?: {
             'data-cy': string;
         } | undefined;

package/lib/{components → legacy/components}/dropdowns/Select/Select.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 import { Select } from './Select';
 declare const meta: {
-    component: (props: import("../../../types").PermafrostComponent & {
+    component: (props: import("../../../../types").PermafrostComponent & {
         disabled?: boolean | undefined;
         initialText?: string | undefined;
         options: {

package/lib/{components → legacy/components}/dropdowns/SingleCombobox/SingleCombobox.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/react';
 import { ComboboxOption } from '../types';
 import { SingleCombobox } from './SingleCombobox';
 declare const meta: {
-    component: import("react").ForwardRefExoticComponent<import("../../../types").PermafrostComponent & import("../types").ComboboxProps & {
+    component: import("react").ForwardRefExoticComponent<import("../../../../types").PermafrostComponent & import("../types").ComboboxProps & {
         dropdownIndicatorProps?: {
             'data-cy': string;
         } | undefined;

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

@@ -0,0 +1,18 @@
+export { Accordion } from './Accordion';
+export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
+export { Button, IconButton } from './buttons';
+export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
+export { Icon, faIcons, indicons } from './Icon';
+export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, DatePicker, NoInputDatePicker, } from './inputs';
+export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, LoadingIndicator, } from './loading-indicators';
+export { ListTable } from './ListTable';
+export { Pagination } from './Pagination';
+export { Shrug } from './user-feedback';
+export { ConfirmModal, ModalBase } from './modals';
+export { LoadingAwareContainer } from './LoadingAwareContainer';
+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';
+export { Tooltip } from './Tooltip';

package/lib/{components → legacy/components}/inputs/DatePicker/DatePicker.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DatePicker } from '@/components/inputs/DatePicker';
+import { DatePicker } from '@/legacy/components/inputs/DatePicker';
 declare const meta: Meta<typeof DatePicker>;
 export default meta;
 type Story = StoryObj<typeof DatePicker>;

package/lib/{components → legacy/components}/inputs/NoInputDatePicker/NoInputDatePicker.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { NoInputDatePicker } from '@/components/inputs/NoInputDatePicker';
+import { NoInputDatePicker } from '@/legacy/components/inputs/NoInputDatePicker';
 declare const meta: Meta<typeof NoInputDatePicker>;
 export default meta;
 type Story = StoryObj<typeof NoInputDatePicker>;

package/lib/{components → legacy/components}/inputs/RadioButtons/RadioButtons.styles.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { AbstractRadioGroup } from '../RadioGroup';
-export declare const StyledRadioGroup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../../types").PermafrostComponent & {
+export declare const StyledRadioGroup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../../../types").PermafrostComponent & {
     value?: string | undefined;
     onChange?: ((value: string) => void) | undefined;
     children: import("react").ReactNode;
     className?: string | undefined;
-} & import("react-aria").AriaRadioGroupProps, {
+} & import("@react-types/radio").AriaRadioGroupProps, {
     hideFocusRing: boolean;
     color: string;
     labelColor: string;

package/lib/{components → legacy/components}/inputs/SearchInput/SearchInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PermafrostComponent } from '@/types';
 type Props = PermafrostComponent & {
-    border?: boolean;
+    inputBorder?: boolean;
     showClearInputIcon?: boolean;
     showSearchIcon?: boolean;
     inputProps?: {

package/lib/{components → legacy/components}/inputs/SearchInput/SearchInput.stories.d.ts

@@ -3,8 +3,8 @@ import { StoryObj } from '@storybook/react';
 import { SearchInput } from './SearchInput';
 declare const meta: {
     component: {
-        (props: import("../../../types").PermafrostComponent & {
-            border?: boolean | undefined;
+        (props: import("../../../../types").PermafrostComponent & {
+            inputBorder?: boolean | undefined;
             showClearInputIcon?: boolean | undefined;
             showSearchIcon?: boolean | undefined;
             inputProps?: {

package/lib/legacy/components/text-truncate/TextTruncate.stories.d.ts

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

package/lib/{components → legacy/components}/user-feedback/Shrug/Shrug.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
     args: {
         message: string;
     };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
         id?: string | undefined;
         className?: string | undefined;
         'data-cy'?: string | undefined;

package/lib/stylesAndAnimations/borders/BorderColor.d.ts

@@ -0,0 +1,3 @@
+import '../../styles/_borders.scss';
+import './borders.scss';
+export declare const BorderColor: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/borders/BorderColor.stories.d.ts

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

package/lib/stylesAndAnimations/borders/BorderRadius.d.ts

@@ -0,0 +1,3 @@
+import '../../styles/_borders.scss';
+import './borders.scss';
+export declare const BorderRadius: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/borders/BorderRadius.stories.d.ts

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

package/lib/stylesAndAnimations/borders/BorderStyles.d.ts

@@ -0,0 +1,3 @@
+import '../../styles/_borders.scss';
+import './borders.scss';
+export declare const BorderStyles: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/borders/BorderStyles.stories.d.ts

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

package/lib/stylesAndAnimations/borders/BorderThickness.d.ts

@@ -0,0 +1,3 @@
+import '../../styles/_borders.scss';
+import './borders.scss';
+export declare const BorderThickness: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/borders/BorderThickness.stories.d.ts

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

package/lib/stylesAndAnimations/borders/index.d.ts

@@ -0,0 +1,4 @@
+export { BorderColor } from './BorderColor';
+export { BorderStyles } from './BorderStyles';
+export { BorderRadius } from './BorderRadius';
+export { BorderThickness } from './BorderThickness';

package/lib/stylesAndAnimations/colors/Swatch.d.ts

@@ -0,0 +1,8 @@
+import './swatches.scss';
+interface Props {
+    color: string;
+    shade: number;
+    colorValue: string;
+}
+export declare const Swatch: ({ color, shade, colorValue }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/stylesAndAnimations/colors/UtilityClasses.d.ts

@@ -0,0 +1 @@
+export declare const UtilityClasses: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/colors/UtilityClasses.stories.d.ts

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

package/lib/stylesAndAnimations/colors/colors.d.ts

@@ -0,0 +1 @@
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/colors/colors.stories.d.ts

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

package/lib/stylesAndAnimations/colors/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const colorList: string[];
+export declare const lightThemeColors: Record<string, any>;
+export declare const darkThemeColors: Record<string, any>;
+export declare const shades = 9;

package/lib/stylesAndAnimations/colors/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => string;

package/lib/stylesAndAnimations/colors/index.d.ts

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

package/lib/stylesAndAnimations/sizing/Sizing.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/_borders.scss';
+export declare const Sizing: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/sizing/Sizing.stories.d.ts

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

package/lib/stylesAndAnimations/sizing/index.d.ts

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

package/lib/stylesAndAnimations/typography/Typography.d.ts

@@ -0,0 +1 @@
+export declare const Typography: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/typography/Typography.stories.d.ts

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

package/lib/stylesAndAnimations/typography/index.d.ts

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

package/lib/types.d.ts

@@ -227,5 +227,5 @@ export type PermafrostComponent = {
 };
 export type ButtonVariant = 'default' | 'primary' | 'destructive';
 export type ButtonSize = 'normal' | 'large';
-import { ListItem } from './components/Navigation/Drawer/types';
+import { ListItem } from './legacy/components/Navigation/Drawer/types';
 export type { ListItem };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.57",
+  "version": "2.0.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
+  "style": "lib/index.css",
   "types": "lib/index.d.ts",
   "scripts": {
     "dev": "storybook dev -p 6006",
@@ -19,9 +20,9 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@indico-data/utils": "^0.0.5",
     "@popperjs/core": "^2.11.8",
     "@react-aria/radio": "^3.10.2",
@@ -30,24 +31,24 @@
     "@react-types/checkbox": "^3.7.1",
     "@react-types/radio": "^3.7.1",
     "classnames": "^2.5.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
     "prop-types": "^15.8.1",
     "react-aria-components": "^1.1.1",
-    "react-day-picker": "^8.10.0",
+    "react-day-picker": "^8.10.1",
+    "react-grid-system": "^8.2.0",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-stately": "^3.30.1",
     "react-tooltip": "5.26.3",
-    "simple-zustand-devtools": "^1.1.0",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
-    "webpack": "^5.90.3",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.2"
+    "webpack-dev-server": "^5.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
@@ -55,6 +56,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@mdx-js/loader": "^3.0.1",
     "@react-aria/button": "^3.9.3",
     "@react-aria/focus": "^3.16.2",
     "@rollup/plugin-babel": "^6.0.4",
@@ -62,25 +64,31 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-styling-webpack": "^0.0.6",
-    "@storybook/addon-themes": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/test": "^7.6.17",
-    "@storybook/test-runner": "^0.16.0",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-docs": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-mdx-gfm": "^8.0.8",
+    "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^8.0.9",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/manager-api": "^8.0.8",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-webpack5": "^8.0.8",
+    "@storybook/test": "^8.0.8",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.7",
     "@types/prop-types": "^15.7.11",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
@@ -89,28 +97,39 @@
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
+    "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-preset-react-app": "^10.0.1",
+    "css-loader": "5.2.6",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
+    "postcss-dark-theme-class": "^1.2.3",
+    "postcss-loader": "^8.1.1",
     "prettier": "3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-grid-system": "^8.2.0",
     "react-router-dom": "^6.22.1",
     "react-select": "^5.8.0",
     "rollup": "^4.12.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.6.17",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.75.0",
+    "sass-loader": "10.1.1",
+    "storybook": "^8.0.8",
+    "storybook-css-modules": "^1.0.8",
+    "style-loader": "2.0.0",
     "styled-components": "^6.1.8",
     "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.3.3"
   },