@arbor-education/design-system.components 0.3.5 → 0.4.0

package/dist/components/toast/Toast.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast } from './Toast';
+import { useState } from 'react';
+import { Button } from '../button/Button';
+const meta = {
+    tags: ['autodocs'],
+    title: 'Components/Toast',
+    component: Toast,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Toasts must have a Toast.Provider somewhere in its parent tree. A Toast.Viewport is also required inside the same provider as it is the element the toasts are rendered into. This uses the Radix Toast component, see https://www.radix-ui.com/primitives/docs/components/toast for more information.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['information', 'success', 'warning', 'danger'],
+            description: 'Toast variant',
+        },
+    },
+};
+const ToastWrapper = (args) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Toast.Provider, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Toast" }), _jsx(Toast, { ...args, open: open, onOpenChange: setOpen }), _jsx(Toast.Viewport, {})] }));
+};
+export const Information = {
+    args: {
+        variant: 'information',
+        children: 'This is an information message',
+    },
+    render: ToastWrapper,
+};
+export const Success = {
+    args: {
+        variant: 'success',
+        children: 'Your changes have been saved successfully!',
+    },
+    render: ToastWrapper,
+};
+export const Warning = {
+    args: {
+        variant: 'warning',
+        children: 'Please review your changes before proceeding',
+    },
+    render: ToastWrapper,
+};
+export const Danger = {
+    args: {
+        variant: 'danger',
+        children: 'An error occurred while processing your request',
+    },
+    render: ToastWrapper,
+};
+export const LongContent = {
+    args: {
+        variant: 'information',
+        children: 'This is a much longer toast message that demonstrates how the component handles extended content. It should wrap appropriately and maintain readability.',
+    },
+    render: ToastWrapper,
+};
+export const MultipleToasts = {
+    render: () => {
+        const [infoOpen, setInfoOpen] = useState(false);
+        const [successOpen, setSuccessOpen] = useState(false);
+        const [warningOpen, setWarningOpen] = useState(false);
+        const [dangerOpen, setDangerOpen] = useState(false);
+        return (_jsxs(Toast.Provider, { children: [_jsxs("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: () => setInfoOpen(true), children: "Open Info" }), _jsx(Button, { onClick: () => setSuccessOpen(true), children: "Open Success" }), _jsx(Button, { onClick: () => setWarningOpen(true), children: "Open Warning" }), _jsx(Button, { onClick: () => setDangerOpen(true), children: "Open Danger" })] }), _jsx(Toast, { variant: "information", open: infoOpen, onOpenChange: setInfoOpen, children: "Information message" }), _jsx(Toast, { variant: "success", open: successOpen, onOpenChange: setSuccessOpen, children: "Success message" }), _jsx(Toast, { variant: "warning", open: warningOpen, onOpenChange: setWarningOpen, children: "Warning message" }), _jsx(Toast, { variant: "danger", open: dangerOpen, onOpenChange: setDangerOpen, children: "Error message" }), _jsx(Toast.Viewport, {})] }));
+    },
+};
+export default meta;
+//# sourceMappingURL=Toast.stories.js.map

package/dist/components/toast/Toast.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/Toast.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/toast/Toast.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=Toast.test.d.ts.map

package/dist/components/toast/Toast.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.test.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.test.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC"}

package/dist/components/toast/Toast.test.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Toast } from './Toast';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+describe('Toast', () => {
+    const renderToast = (props = {}) => {
+        return render(_jsxs(Toast.Provider, { children: [_jsx(Toast, { open: true, ...props, children: "Test message" }), _jsx(Toast.Viewport, {})] }));
+    };
+    describe('rendering', () => {
+        it('renders the toast with content', () => {
+            renderToast();
+            expect(screen.getByText('Test message')).toBeInTheDocument();
+        });
+        it('renders with information variant by default', () => {
+            const { container } = renderToast();
+            const toast = container.querySelector('.ds-toast--information');
+            expect(toast).toBeInTheDocument();
+        });
+        it('renders with the correct class for each variant', () => {
+            const variants = ['information', 'danger', 'success', 'warning'];
+            variants.forEach((variant) => {
+                const { container, unmount } = renderToast({ variant });
+                const toast = container.querySelector(`.ds-toast--${variant}`);
+                expect(toast).toBeInTheDocument();
+                unmount();
+            });
+        });
+    });
+    describe('icons', () => {
+        it('renders info icon for information variant', () => {
+            const { container } = renderToast({ variant: 'information' });
+            expect(container.querySelector('.ds-icon-info')).toBeInTheDocument();
+        });
+        it('renders circle-alert icon for danger variant', () => {
+            const { container } = renderToast({ variant: 'danger' });
+            expect(container.querySelector('.ds-icon-circle-alert')).toBeInTheDocument();
+        });
+        it('renders circle-check icon for success variant', () => {
+            const { container } = renderToast({ variant: 'success' });
+            expect(container.querySelector('.ds-icon-circle-check')).toBeInTheDocument();
+        });
+        it('renders triangle-alert icon for warning variant', () => {
+            const { container } = renderToast({ variant: 'warning' });
+            expect(container.querySelector('.ds-icon-triangle-alert')).toBeInTheDocument();
+        });
+        it('renders close icon with screen reader text', () => {
+            renderToast();
+            expect(screen.getByText('Close')).toBeInTheDocument();
+        });
+    });
+    describe('interactions', () => {
+        it('calls onOpenChange when close button is clicked', async () => {
+            const user = userEvent.setup();
+            const onOpenChange = vi.fn();
+            render(_jsxs(Toast.Provider, { children: [_jsx(Toast, { open: true, onOpenChange: onOpenChange, children: "Test message" }), _jsx(Toast.Viewport, {})] }));
+            const closeButton = screen.getByRole('button');
+            await user.click(closeButton);
+            expect(onOpenChange).toHaveBeenCalled();
+        });
+    });
+    describe('Provider and Viewport', () => {
+        it('exposes Provider component', () => {
+            expect(Toast.Provider).toBeDefined();
+        });
+        it('exposes Viewport component', () => {
+            expect(Toast.Viewport).toBeDefined();
+        });
+    });
+    describe('custom props', () => {
+        it('passes through additional props to Root', () => {
+            const { container } = renderToast({
+                'data-testid': 'custom-toast',
+            });
+            const toast = container.querySelector('[data-testid="custom-toast"]');
+            expect(toast).toBeInTheDocument();
+        });
+        it('applies custom className alongside default classes', () => {
+            renderToast();
+            const { container } = render(_jsxs(Toast.Provider, { children: [_jsx(Toast, { open: true, variant: "success", children: "Success message" }), _jsx(Toast.Viewport, {})] }));
+            const toast = container.querySelector('.ds-toast.ds-toast--success');
+            expect(toast).toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=Toast.test.js.map

package/dist/components/toast/Toast.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.test.js","sourceRoot":"","sources":["../../../src/components/toast/Toast.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/toast/ToastViewport.d.ts

@@ -0,0 +1,3 @@
+import { Toast } from 'radix-ui';
+export declare const ToastViewport: ({ className, ...rest }: Toast.ToastViewportProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToastViewport.d.ts.map

package/dist/components/toast/ToastViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../../src/components/toast/ToastViewport.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,aAAa,GAAI,wBAAwB,KAAK,CAAC,kBAAkB,4CAE7E,CAAC"}

package/dist/components/toast/ToastViewport.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Toast } from 'radix-ui';
+export const ToastViewport = ({ className, ...rest }) => (_jsx(Toast.Viewport, { className: classNames('ds-toast__viewport', className), ...rest }));
+//# sourceMappingURL=ToastViewport.js.map

package/dist/components/toast/ToastViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastViewport.js","sourceRoot":"","sources":["../../../src/components/toast/ToastViewport.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAA4B,EAAE,EAAE,CAAC,CACjF,KAAC,KAAK,CAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,KAAM,IAAI,GAAI,CACrF,CAAC"}

package/dist/index.css

@@ -25,6 +25,7 @@
   --size-control-medium: 3rem;
   --size-control-large: 4rem;
   --size-control-xlarge: 5rem;
+  --shadow-small: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
   --page-sign-in-color-background: #fffcf8;
   --color-grey-100: #efefef;
   --color-grey-200: #dfdfdf;
@@ -334,6 +335,7 @@
   --modal-radius: var(--border-radius-small);
   --modal-color-background: var(--color-grey-050);
   --modal-min-width: 37.5rem;
+  --toast-max-width: 360px;
   --toast-info-icon-hover-color-background: var(--color-semantic-info-100);
   --toast-info-icon-color-icon: var(--color-semantic-info-800);
   --toast-info-color-text: var(--color-semantic-info-800);
@@ -1378,16 +1380,22 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+}
+
+body *[class^=ds-], body *[class*=" ds-"] {
   font-family: var(--font-family-standard);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--font-weight-regular);
+  box-sizing: border-box;
 }
 
 .ds-button {
+  text-wrap: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--button-medium-spacing-gap-vertical);
   border-radius: var(--button-medium-radius);
-  font-family: var(--font-family-standard);
   font-weight: var(--font-weight-semi-bold);
   padding: var(--button-medium-spacing-vertical) var(--button-medium-spacing-horizontal);
   border: none;
@@ -1395,7 +1403,6 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   position: relative;
   text-decoration: none;
-  font-size: var(--font-size-2-13);
 }
 .ds-button--no-horizontal-padding {
   padding: var(--button-medium-spacing-vertical) 0;
@@ -1466,10 +1473,7 @@
 .ds-button--dropdown {
   color: var(--color-grey-900, #2F2F2F);
   /* typography/body/p1-regular */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size, 13px);
   font-style: normal;
-  font-weight: var(--type-body-p-weight, 400);
   line-height: 150%; /* 19.5px */
   display: flex;
   padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
@@ -1601,28 +1605,28 @@
   align-items: center;
 }
 
-h1.ds-heading {
+h1.ds-heading, h1 .ds-editable-text__button, h1 .ds-editable-text__input {
   font-family: var(--type-headings-h1-family);
   font-size: var(--type-headings-h1-size);
   font-weight: var(--type-headings-h1-weight);
   line-height: var(--type-headings-h1-line-height);
 }
 
-h2.ds-heading {
+h2.ds-heading, h2 .ds-editable-text__button, h2 .ds-editable-text__input {
   font-family: var(--type-headings-h2-family);
   font-size: var(--type-headings-h2-size);
   font-weight: var(--type-headings-h2-weight);
   line-height: var(--type-headings-h2-line-height);
 }
 
-h3.ds-heading {
+h3.ds-heading, h3 .ds-editable-text__button, h3 .ds-editable-text__input {
   font-family: var(--type-headings-h3-family);
   font-size: var(--type-headings-h3-size);
   font-weight: var(--type-headings-h3-weight);
   line-height: var(--type-headings-h3-line-height);
 }
 
-h4.ds-heading {
+h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   font-family: var(--type-headings-h4-family);
   font-size: var(--type-headings-h4-size);
   font-weight: var(--type-headings-h4-weight);
@@ -1694,9 +1698,6 @@ h4.ds-heading {
 }
 .ds-card__content .ds-card__text .ds-card__paragraph {
   margin: 0;
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
 }
 
 .ds-dropdown__content {
@@ -1706,10 +1707,7 @@ h4.ds-heading {
   background-color: var(--form-dropdown-color-background);
   min-width: 200px;
   border: 1px solid var(--color-grey-200);
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%;
 }
 
@@ -1744,8 +1742,6 @@ h4.ds-heading {
 }
 
 .ds-form-field {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   line-height: 150%;
   width: 100%;
   box-sizing: border-box;
@@ -1798,8 +1794,6 @@ h4.ds-heading {
 }
 
 .ds-fieldset__legend {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;
@@ -1809,9 +1803,6 @@ h4.ds-heading {
 
 .ds-input {
   width: 100%;
-  font-size: var(--type-body-p-size);
-  font-family: var(--font-family-standard);
-  font-weight: var(--font-weight-regular);
   border: var(--border-weight) solid var(--form-field-text-default-color-border);
   border-radius: var(--form-field-radius);
   color: var(--form-field-text-default-color-text);
@@ -1867,8 +1858,6 @@ h4.ds-heading {
 }
 
 .ds-label {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;
@@ -1957,8 +1946,6 @@ h4.ds-heading {
 }
 .ds-radio-button-input__container .ds-radio-button-input__text {
   flex: 1 0 0;
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
   color: var(--checkbox-default-color-text);
   line-height: var(--line-height-default);
   user-select: none;
@@ -2060,8 +2047,6 @@ h4.ds-heading {
 }
 .ds-checkbox-input__container .ds-checkbox-label__text {
   flex: 1 0 0;
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
   color: var(--checkbox-default-color-text);
   line-height: var(--line-height-default);
 }
@@ -2119,7 +2104,6 @@ h4.ds-heading {
 .ds-select-dropdown__items--header {
   margin: 0;
   color: var(--form-dropdown-form-drop-item-title-color-text);
-  font-size: var(--font-size-2-13);
   padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
   border-bottom: var(--border-weight) solid var(--page-base-color-border);
 }
@@ -2143,10 +2127,7 @@ h4.ds-heading {
   flex-grow: 0;
   width: fit-content;
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 }
 .ds-tag--neutral {
@@ -2220,10 +2201,7 @@ h4.ds-heading {
   width: fit-content;
   cursor: pointer;
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 }
 .ds-pill__inactive {
@@ -2299,7 +2277,6 @@ h4.ds-heading {
   list-style: none;
   padding: 0;
   margin: 0;
-  font-family: var(--type-body-p-family);
   align-items: center;
   justify-content: flex-start;
   gap: var(--tabs-spacing-horizontal-gap);
@@ -2316,7 +2293,6 @@ h4.ds-heading {
 .ds-tabs-item__tab {
   min-width: var(--size-control-xlarge);
   position: relative;
-  font-family: var(--type-body-p-family);
   padding: var(--tabs-tab-item-spacing-vertical) var(--tabs-tab-item-spacing-horizontal);
   cursor: pointer;
   display: flex;
@@ -2533,9 +2509,6 @@ h4.ds-heading {
 }
 .ds-search-bar--inactive__placeholder {
   color: var(--search-global-default-color-text);
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
 }
 .ds-search-bar--inactive-icon-only {
   padding: var(--search-global-spacing-vertical);
@@ -2568,18 +2541,11 @@ h4.ds-heading {
   width: 39px;
 }
 
-.ds-table__pagination-controls, .ds-table__row-count-info {
-  font-size: var(--font-size-2-13);
-}
-
 .ds-tooltip__content {
   color: var(--tooltip-color-text);
   background: var(--tooltip-color-background);
   padding: var(--tooltip-spacing-vertical) var(--tooltip-spacing-horizontal);
   border-radius: var(--border-radius-small);
-  font-size: var(--type-body-p-size);
-  font-family: var(--type-body-p-family);
-  font-weight: var(--type-body-p-weight);
 }
 .ds-tooltip__content-arrow {
   fill: var(--tooltip-color-background);
@@ -2615,9 +2581,6 @@ h4.ds-heading {
   max-width: calc(100vw - var(--spacing-medium));
   max-height: calc(100vh - var(--spacing-medium));
   min-width: var(--modal-min-width);
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
   line-height: var(--type-body-line-height);
   color: var(--type-body-p-color);
 }
@@ -2705,9 +2668,6 @@ h4.ds-heading {
   border: var(--border-weight) solid var(--color-grey-200);
   border-radius: var(--border-radius-small);
   color: var(--color-grey-900);
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
-  font-weight: var(--font-weight-regular);
   padding: 0 var(--spacing-small);
   justify-content: space-between;
 }
@@ -2721,9 +2681,6 @@ h4.ds-heading {
   border: var(--border-weight) solid var(--color-grey-200);
   border-radius: var(--border-radius-small);
   color: var(--color-grey-900);
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
-  font-weight: var(--font-weight-regular);
   box-sizing: border-box;
 }
 .ds-column-filter-time__input::-webkit-calendar-picker-indicator {
@@ -2731,4 +2688,193 @@ h4.ds-heading {
   cursor: pointer;
 }
 
+.ds-banner {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--banner-spacing-gap);
+  padding: var(--banner-spacing-vertical) var(--banner-spacing-horizontal);
+  border-radius: var(--banner-radius);
+  border-width: 1px;
+  border-style: solid;
+}
+.ds-banner__central-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-small);
+}
+.ds-banner__title {
+  margin: 0;
+}
+.ds-banner__button {
+  color: inherit;
+  align-self: flex-end;
+  text-wrap: nowrap;
+}
+.ds-banner--info {
+  border-color: var(--banner-info-color-border);
+  background-color: var(--banner-info-color-background);
+  color: var(--banner-info-color-text);
+}
+.ds-banner--info svg {
+  stroke: var(--banner-info-color-icon);
+}
+.ds-banner--neutral {
+  border-color: var(--banner-neutral-color-border);
+  background-color: var(--banner-neutral-color-background);
+  color: var(--banner-neutral-color-text);
+}
+.ds-banner--neutral svg {
+  stroke: var(--banner-neutral-color-icon);
+}
+.ds-banner--warning {
+  border-color: var(--banner-warning-color-border);
+  background-color: var(--banner-warning-color-background);
+  color: var(--banner-warning-color-text);
+}
+.ds-banner--warning svg {
+  stroke: var(--banner-warning-color-icon);
+}
+.ds-banner--destructive {
+  border-color: var(--banner-destructive-color-border);
+  background-color: var(--banner-destructive-color-background);
+  color: var(--banner-destructive-color-text);
+}
+.ds-banner--destructive svg {
+  stroke: var(--banner-destructive-color-icon);
+}
+
+.ds-editable-text {
+  width: 100%;
+  box-sizing: border-box;
+  font-size: inherit;
+  font-weight: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+}
+.ds-editable-text__input, .ds-editable-text__button {
+  width: 100%;
+  box-sizing: border-box;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+}
+.ds-editable-text .ds-input--M {
+  height: auto;
+}
+.ds-editable-text__button {
+  border: var(--border-weight) solid transparent;
+  border-radius: var(--form-field-radius);
+  background-color: transparent;
+  padding: 0 var(--form-field-spacing-horizontal);
+  cursor: pointer;
+}
+.ds-editable-text__button:hover {
+  background-color: var(--color-grey-100);
+}
+.ds-editable-text__button-icon {
+  color: var(--color-grey-500);
+  margin-left: var(--spacing-small);
+  flex-shrink: 0;
+}
+
+.ds-progress {
+  width: 100%;
+  height: var(--spacing-small);
+  background-color: var(--color-grey-100);
+  overflow: hidden;
+  border-radius: var(--border-radius-large);
+}
+.ds-progress__indicator {
+  height: 100%;
+  background-color: var(--color-brand-600);
+  border-radius: var(--border-radius-large);
+}
+
+.ds-toast__viewport {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  top: 0;
+  right: 0;
+  position: fixed;
+}
+
+.ds-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: var(--border-weight) solid;
+  gap: var(--toast-spacing-gap);
+  padding: var(--toast-spacing-padding);
+  border-radius: var(--toast-radius);
+  box-shadow: var(--shadow-small);
+  font-family: var(--type-body-bold-family);
+  font-style: normal;
+  font-weight: var(--type-body-bold-weight);
+  line-height: var(--line-height-default);
+  max-width: var(--toast-max-width);
+}
+.ds-toast__icon {
+  flex-shrink: 0;
+}
+.ds-toast__close {
+  flex-shrink: 0;
+  background-color: transparent;
+  border: none;
+  color: currentColor;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+.ds-toast--information {
+  border-color: var(--toast-info-color-border);
+  background-color: var(--toast-info-color-background);
+  color: var(--toast-info-color-text);
+}
+.ds-toast--information .ds-toast__close:hover {
+  background: var(--toast-info-icon-hover-color-background);
+}
+.ds-toast--danger {
+  border-color: var(--toast-destructive-color-border);
+  background-color: var(--toast-destructive-color-background);
+  color: var(--toast-destructive-color-text);
+}
+.ds-toast--danger .ds-toast__close:hover {
+  background: var(--toast-destructive-icon-hover-color-background);
+}
+.ds-toast--success {
+  border-color: var(--toast-success-color-border);
+  background-color: var(--toast-success-color-background);
+  color: var(--toast-success-color-text);
+}
+.ds-toast--success .ds-toast__close:hover {
+  background: var(--toast-success-icon-hover-color-background);
+}
+.ds-toast--warning {
+  border-color: var(--toast-warning-color-border);
+  background-color: var(--toast-warning-color-background);
+  color: var(--toast-warning-color-text);
+}
+.ds-toast--warning .ds-toast__close:hover {
+  background: var(--toast-warning-icon-hover-color-background);
+}
+
 /*# sourceMappingURL=index.css.map */