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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- [#124](https://github.com/arbor-education/design-system.components/pull/124) [`202615f`](https://github.com/arbor-education/design-system.components/commit/202615f09a42e564dd418b7bd1b9c6a3de38b33f) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-66715 add banner component
+
+### Patch Changes
+
+- [#125](https://github.com/arbor-education/design-system.components/pull/125) [`f01b121`](https://github.com/arbor-education/design-system.components/commit/f01b1216f60898647910fd64af9262e59d7e3060) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-67797 added global default styles for DS components
+
 ## 0.3.6
 
 ### Patch Changes

package/dist/components/banner/Banner.d.ts

@@ -0,0 +1,19 @@
+import type { IconName } from '../icon/allowedIcons';
+export declare enum BANNER_LEVEL {
+    INFO = "info",
+    NEUTRAL = "neutral",
+    WARNING = "warning",
+    DESTRUCTIVE = "destructive"
+}
+export type BannerProps = {
+    className?: string;
+    level?: BANNER_LEVEL;
+    icon?: IconName;
+    title?: string;
+    buttonText?: string;
+    buttonOnClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    text?: string;
+    hideIcon?: boolean;
+};
+export declare const Banner: (props: BannerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/components/banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoBF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAsCxC,CAAC"}

package/dist/components/banner/Banner.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
+export var BANNER_LEVEL;
+(function (BANNER_LEVEL) {
+    BANNER_LEVEL["INFO"] = "info";
+    BANNER_LEVEL["NEUTRAL"] = "neutral";
+    BANNER_LEVEL["WARNING"] = "warning";
+    BANNER_LEVEL["DESTRUCTIVE"] = "destructive";
+})(BANNER_LEVEL || (BANNER_LEVEL = {}));
+const bannerClassName = cva(['ds-banner'], {
+    variants: {
+        level: {
+            [BANNER_LEVEL.INFO]: 'ds-banner--info',
+            [BANNER_LEVEL.NEUTRAL]: 'ds-banner--neutral',
+            [BANNER_LEVEL.WARNING]: 'ds-banner--warning',
+            [BANNER_LEVEL.DESTRUCTIVE]: 'ds-banner--destructive',
+        },
+    },
+});
+const DEFAULT_ICON_MAP = {
+    [BANNER_LEVEL.INFO]: 'info',
+    [BANNER_LEVEL.NEUTRAL]: 'info',
+    [BANNER_LEVEL.WARNING]: 'triangle-alert',
+    [BANNER_LEVEL.DESTRUCTIVE]: 'circle-alert',
+};
+export const Banner = (props) => {
+    const { className, level = BANNER_LEVEL.NEUTRAL, icon: rawIcon, hideIcon = false, title, buttonText, buttonOnClick, text, } = props;
+    const icon = hideIcon ? null : rawIcon ?? DEFAULT_ICON_MAP[level];
+    return (_jsxs("div", { className: bannerClassName({ level, className }), children: [icon && _jsx(Icon, { size: 24, name: icon }), _jsxs("div", { className: "ds-banner__central-container", children: [title && (_jsx("h3", { className: "ds-banner__title", children: title })), text && _jsx("span", { children: text })] }), buttonText && (_jsx(Button, { onClick: buttonOnClick, className: "ds-banner__button", variant: "text-link", children: buttonText }))] }));
+};
+//# sourceMappingURL=Banner.js.map

package/dist/components/banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/banner/Banner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,2CAA2B,CAAA;AAC7B,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAaD,MAAM,eAAe,GAAG,GAAG,CAAC,CAAC,WAAW,CAAC,EAAE;IACzC,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,iBAAiB;YACtC,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,oBAAoB;YAC5C,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,oBAAoB;YAC5C,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,wBAAwB;SACrD;KACF;CACF,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAmC;IACvD,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM;IAC3B,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM;IAC9B,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,gBAAgB;IACxC,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,cAAc;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,SAAS,EACT,KAAK,GAAG,YAAY,CAAC,OAAO,EAC5B,IAAI,EAAE,OAAO,EACb,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,UAAU,EACV,aAAa,EACb,IAAI,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,eACE,SAAS,EAAE,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,aAE/C,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,EACvC,eAAK,SAAS,EAAC,8BAA8B,aAC1C,KAAK,IAAI,CACR,aAAI,SAAS,EAAC,kBAAkB,YAC7B,KAAK,GACH,CACN,EACA,IAAI,IAAI,yBAAO,IAAI,GAAQ,IACxB,EACL,UAAU,IAAI,CACb,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAC,WAAW,YAElB,UAAU,GACJ,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/banner/Banner.stories.d.ts

@@ -0,0 +1,72 @@
+import type { Meta } from '@storybook/react-vite';
+import { Banner, BANNER_LEVEL } from './Banner';
+declare const meta: Meta<typeof Banner>;
+export declare const Neutral: {
+    args: {
+        text: string;
+    };
+};
+export declare const Info: {
+    args: {
+        level: BANNER_LEVEL;
+        text: string;
+    };
+};
+export declare const Warning: {
+    args: {
+        level: BANNER_LEVEL;
+        text: string;
+    };
+};
+export declare const Destructive: {
+    args: {
+        level: BANNER_LEVEL;
+        text: string;
+    };
+};
+export declare const WithTitle: {
+    args: {
+        level: BANNER_LEVEL;
+        title: string;
+        text: string;
+    };
+};
+export declare const WithButton: {
+    args: {
+        level: BANNER_LEVEL;
+        text: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const WithTitleAndButton: {
+    args: {
+        level: BANNER_LEVEL;
+        title: string;
+        text: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const TitleOnly: {
+    args: {
+        level: BANNER_LEVEL;
+        title: string;
+    };
+};
+export declare const CustomIcon: {
+    args: {
+        level: BANNER_LEVEL;
+        icon: string;
+        text: string;
+    };
+};
+export declare const HideIcon: {
+    args: {
+        level: BANNER_LEVEL;
+        hideIcon: boolean;
+        text: string;
+    };
+};
+export default meta;
+//# sourceMappingURL=Banner.stories.d.ts.map

package/dist/components/banner/Banner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAa7B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAKhB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;CAQ9B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/banner/Banner.stories.js

@@ -0,0 +1,84 @@
+import { Banner, BANNER_LEVEL } from './Banner';
+const meta = {
+    tags: ['autodocs'],
+    title: 'Components/Banner',
+    component: Banner,
+    argTypes: {
+        level: {
+            control: { type: 'select' },
+            options: Object.values(BANNER_LEVEL),
+        },
+    },
+    args: {
+        buttonOnClick: () => { console.log('click!'); },
+    },
+};
+export const Neutral = {
+    args: {
+        text: 'This is a neutral banner message with some useful information for the user.',
+    },
+};
+export const Info = {
+    args: {
+        level: BANNER_LEVEL.INFO,
+        text: 'Your session will expire in 10 minutes. Save your work to avoid losing changes.',
+    },
+};
+export const Warning = {
+    args: {
+        level: BANNER_LEVEL.WARNING,
+        text: 'This action may affect student records. Please review before proceeding.',
+    },
+};
+export const Destructive = {
+    args: {
+        level: BANNER_LEVEL.DESTRUCTIVE,
+        text: 'Something went wrong. Please contact your system administrator.',
+    },
+};
+export const WithTitle = {
+    args: {
+        level: BANNER_LEVEL.INFO,
+        title: 'Important Update',
+        text: 'A new version of the system is available. Refresh the page to apply updates.',
+    },
+};
+export const WithButton = {
+    args: {
+        level: BANNER_LEVEL.WARNING,
+        text: 'You have unsaved changes that will be lost.',
+        buttonText: 'Undo changes',
+        buttonOnClick: () => { console.log('Banner button clicked'); },
+    },
+};
+export const WithTitleAndButton = {
+    args: {
+        level: BANNER_LEVEL.INFO,
+        title: 'Scheduled Maintenance',
+        text: 'The system will be unavailable on Saturday 1st March between 2am–4am.',
+        buttonText: 'Learn more',
+        buttonOnClick: () => { console.log('Banner button clicked'); },
+    },
+};
+export const TitleOnly = {
+    args: {
+        level: BANNER_LEVEL.NEUTRAL,
+        title: 'No results found for the selected filters.',
+    },
+};
+export const CustomIcon = {
+    args: {
+        level: BANNER_LEVEL.INFO,
+        icon: 'circle-check',
+        text: 'Your changes have been saved successfully.',
+    },
+};
+export const HideIcon = {
+    args: {
+        level: BANNER_LEVEL.WARNING,
+        hideIcon: true,
+        text: 'This banner has its icon hidden.',
+    },
+};
+export default meta;
+//# sourceMappingURL=Banner.stories.js.map

package/dist/components/banner/Banner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/Banner.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,IAAI,GAAwB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;SACrC;KACF;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;KAChD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,6EAA6E;KACpF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,IAAI;QACxB,IAAI,EAAE,iFAAiF;KACxF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,OAAO;QAC3B,IAAI,EAAE,0EAA0E;KACjF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,WAAW;QAC/B,IAAI,EAAE,iEAAiE;KACxE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,IAAI;QACxB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,8EAA8E;KACrF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,OAAO;QAC3B,IAAI,EAAE,6CAA6C;QACnD,UAAU,EAAE,cAAc;QAC1B,aAAa,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;KAC/D;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,IAAI;QACxB,KAAK,EAAE,uBAAuB;QAC9B,IAAI,EAAE,uEAAuE;QAC7E,UAAU,EAAE,YAAY;QACxB,aAAa,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;KAC/D;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,OAAO;QAC3B,KAAK,EAAE,4CAA4C;KACpD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,IAAI;QACxB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,4CAA4C;KACnD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY,CAAC,OAAO;QAC3B,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,kCAAkC;KACzC;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/banner/Banner.test.d.ts

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

package/dist/components/banner/Banner.test.d.ts.map

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

package/dist/components/banner/Banner.test.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { Banner, BANNER_LEVEL } from './Banner';
+describe('Banner', () => {
+    describe('text', () => {
+        test('renders text content', () => {
+            render(_jsx(Banner, { text: "Something important happened." }));
+            expect(screen.getByText('Something important happened.')).toBeInTheDocument();
+        });
+        test('renders title', () => {
+            render(_jsx(Banner, { title: "Scheduled Maintenance" }));
+            expect(screen.getByRole('heading', { name: 'Scheduled Maintenance' })).toBeInTheDocument();
+        });
+        test('does not render a heading when title is not provided', () => {
+            render(_jsx(Banner, { text: "No title here." }));
+            expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+        });
+    });
+    describe('level', () => {
+        test('applies neutral class by default', () => {
+            const { container } = render(_jsx(Banner, {}));
+            expect(container.firstChild).toHaveClass('ds-banner--neutral');
+        });
+        test.each(Object.values(BANNER_LEVEL))('applies correct class for level %s', (level) => {
+            const { container } = render(_jsx(Banner, { level: level }));
+            expect(container.firstChild).toHaveClass(`ds-banner--${level.toLowerCase()}`);
+        });
+    });
+    describe('icon', () => {
+        test('renders the default icon based on level', () => {
+            const { container } = render(_jsx(Banner, {}));
+            expect(container.querySelector('svg')).toBeInTheDocument();
+        });
+        test('renders a custom icon when icon prop is provided', () => {
+            const { container } = render(_jsx(Banner, { icon: "circle-check" }));
+            expect(container.querySelector('svg')).toBeInTheDocument();
+        });
+        test('does not render an icon when hideIcon is true', () => {
+            const { container } = render(_jsx(Banner, { hideIcon: true }));
+            expect(container.querySelector('svg')).not.toBeInTheDocument();
+        });
+        test('does not render an icon when hideIcon is true even if icon prop is provided', () => {
+            const { container } = render(_jsx(Banner, { icon: "info", hideIcon: true }));
+            expect(container.querySelector('svg')).not.toBeInTheDocument();
+        });
+    });
+    describe('button', () => {
+        test('renders a button when buttonText is provided', () => {
+            render(_jsx(Banner, { buttonText: "Learn more" }));
+            expect(screen.getByRole('button')).toBeInTheDocument();
+        });
+        test('does not render a button when buttonText is not provided', () => {
+            render(_jsx(Banner, { text: "No button here." }));
+            expect(screen.queryByRole('button')).not.toBeInTheDocument();
+        });
+        test('calls buttonOnClick when button is clicked', () => {
+            const handleClick = vi.fn();
+            render(_jsx(Banner, { buttonText: "Learn more", buttonOnClick: handleClick }));
+            fireEvent.click(screen.getByRole('button'));
+            expect(handleClick).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('className', () => {
+        test('applies custom className', () => {
+            const { container } = render(_jsx(Banner, { className: "my-custom-class" }));
+            expect(container.firstChild).toHaveClass('my-custom-class');
+        });
+    });
+});
+//# sourceMappingURL=Banner.test.js.map

package/dist/components/banner/Banner.test.js.map

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

package/dist/index.css

@@ -1380,7 +1380,13 @@
   -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 {
@@ -1390,7 +1396,6 @@
   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;
@@ -1398,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;
@@ -1469,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);
@@ -1697,9 +1698,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .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 {
@@ -1709,10 +1707,7 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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%;
 }
 
@@ -1747,8 +1742,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 
 .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;
@@ -1801,8 +1794,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 
 .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%;
@@ -1812,9 +1803,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 
 .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);
@@ -1870,8 +1858,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 
 .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%;
@@ -1960,8 +1946,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .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;
@@ -2063,8 +2047,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .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);
 }
@@ -2122,7 +2104,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 .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);
 }
@@ -2146,10 +2127,7 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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 {
@@ -2223,10 +2201,7 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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 {
@@ -2302,7 +2277,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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);
@@ -2319,7 +2293,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 .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;
@@ -2536,9 +2509,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .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);
@@ -2571,18 +2541,11 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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);
@@ -2618,9 +2581,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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);
 }
@@ -2708,9 +2668,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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;
 }
@@ -2724,9 +2681,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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 {
@@ -2734,6 +2688,63 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   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;
@@ -2816,7 +2827,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   border-radius: var(--toast-radius);
   box-shadow: var(--shadow-small);
   font-family: var(--type-body-bold-family);
-  font-size: var(--type-body-p-size);
   font-style: normal;
   font-weight: var(--type-body-bold-weight);
   line-height: var(--line-height-default);