@arbor-education/design-system.components 0.0.1 → 0.0.3

package/dist/components/tabs/Tabs.stories.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from './Tabs';
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: 'A flexible tabs component with compound component pattern. Use Tabs.Item to create individual tab items.',
+            },
+        },
+    },
+    argTypes: {
+        defaultActiveTab: {
+            control: 'text',
+            description: 'The ID of the tab that should be active by default',
+        },
+        onTabChange: {
+            action: 'tab changed',
+            description: 'Callback function called when the active tab changes',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class name for the tabs container',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultActiveTab: 'tab1',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Overview", children: _jsxs("div", { children: [_jsx("h3", { children: "Overview" }), _jsx("p", { children: "This is the overview tab content. It contains general information about the topic." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Details", children: _jsxs("div", { children: [_jsx("h3", { children: "Details" }), _jsx("p", { children: "This is the details tab content. It provides more specific information and data." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsx("p", { children: "This is the settings tab content. It contains configuration options and preferences." })] }) })] })),
+};
+export const WithDisabledTab = {
+    args: {
+        defaultActiveTab: 'tab1',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Available" }), _jsx("p", { children: "This tab is available and can be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Disabled", disabled: true, children: _jsxs("div", { children: [_jsx("h3", { children: "Disabled" }), _jsx("p", { children: "This tab is disabled and cannot be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Another Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Available" }), _jsx("p", { children: "This tab is also available and can be clicked." })] }) })] })),
+};
+export const ManyTabs = {
+    args: {
+        defaultActiveTab: 'tab3',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First", children: _jsxs("div", { children: [_jsx("h3", { children: "First Tab" }), _jsx("p", { children: "Content for the first tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second", children: _jsxs("div", { children: [_jsx("h3", { children: "Second Tab" }), _jsx("p", { children: "Content for the second tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third", children: _jsxs("div", { children: [_jsx("h3", { children: "Third Tab" }), _jsx("p", { children: "Content for the third tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab4", label: "Fourth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fourth Tab" }), _jsx("p", { children: "Content for the fourth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab5", label: "Fifth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fifth Tab" }), _jsx("p", { children: "Content for the fifth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab6", label: "Sixth", children: _jsxs("div", { children: [_jsx("h3", { children: "Sixth Tab" }), _jsx("p", { children: "Content for the sixth tab." })] }) })] })),
+};
+export const WithRichContent = {
+    args: {
+        defaultActiveTab: 'dashboard',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "dashboard", label: "Dashboard", children: _jsxs("div", { children: [_jsx("h3", { children: "Dashboard" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginTop: '16px' }, children: [_jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Total Users" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "1,234" })] }), _jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Active Sessions" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "567" })] })] })] }) }), _jsx(Tabs.Item, { tabId: "analytics", label: "Analytics", children: _jsxs("div", { children: [_jsx("h3", { children: "Analytics" }), _jsx("p", { children: "View detailed analytics and reports for your application." }), _jsxs("ul", { style: { marginTop: '16px' }, children: [_jsx("li", { children: "Page views" }), _jsx("li", { children: "User engagement" }), _jsx("li", { children: "Conversion rates" }), _jsx("li", { children: "Performance metrics" })] })] }) }), _jsx(Tabs.Item, { tabId: "settings", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsxs("form", { style: { marginTop: '16px' }, children: [_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { htmlFor: "theme", children: "Theme:" }), _jsxs("select", { id: "theme", style: { marginLeft: '8px', padding: '4px 8px' }, children: [_jsx("option", { children: "Light" }), _jsx("option", { children: "Dark" }), _jsx("option", { children: "Auto" })] })] }), _jsx("div", { style: { marginBottom: '16px' }, children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", style: { marginRight: '8px' } }), "Enable notifications"] }) }), _jsx("button", { type: "submit", style: { padding: '8px 16px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }, children: "Save Settings" })] })] }) })] })),
+};
+export const CustomStyling = {
+    args: {
+        defaultActiveTab: 'tab1',
+        className: 'custom-tabs-container',
+    },
+    render: (args) => (_jsxs("div", { children: [_jsx("style", { children: `
+        .custom-tabs-container {
+          border: 2px solid #e0e0e0;
+          border-radius: 8px;
+          padding: 16px;
+        }
+        .custom-tabs-container .ds-tabs__tab {
+          border-radius: 4px;
+          margin-right: 4px;
+        }
+        .custom-tabs-container .ds-tabs__tab--active {
+          background-color: #f0f8ff;
+        }
+      ` }), _jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Styled Tab 1", children: _jsxs("div", { children: [_jsx("h3", { children: "Custom Styled Tab" }), _jsx("p", { children: "This tab has custom styling applied to the container." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Styled Tab 2", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Custom Tab" }), _jsx("p", { children: "Notice the custom border and styling around the tabs container." })] }) })] })] })),
+};
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/components/tabs/Tabs.stories.js.map

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

package/dist/components/tabs/Tabs.test.d.ts

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

package/dist/components/tabs/Tabs.test.d.ts.map

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

package/dist/components/tabs/Tabs.test.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, test, describe, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tabs } from './Tabs';
+import '@testing-library/jest-dom/vitest';
+describe('Tabs Component', () => {
+    test('renders tabs with default active tab', () => {
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        expect(screen.getByText('Tab 1')).toBeInTheDocument();
+        expect(screen.getByText('Tab 2')).toBeInTheDocument();
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    test('switches active tab when clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        await user.click(tab2Button);
+        expect(screen.getByText('Content 2')).toBeInTheDocument();
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+    test('calls onTabChange when tab is switched', async () => {
+        const user = userEvent.setup();
+        const onTabChange = vi.fn();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        await user.click(tab2Button);
+        expect(onTabChange).toHaveBeenCalledWith('tab2');
+    });
+    test('handles keyboard navigation', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        tab2Button.focus();
+        await user.keyboard('{Enter}');
+        expect(screen.getByText('Content 2')).toBeInTheDocument();
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+    test('handles space key navigation', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        tab2Button.focus();
+        await user.keyboard(' ');
+        expect(screen.getByText('Content 2')).toBeInTheDocument();
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+    test('disabled tab does not respond to clicks', async () => {
+        const user = userEvent.setup();
+        const onTabChange = vi.fn();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", disabled: true, children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        await user.click(tab2Button);
+        expect(onTabChange).not.toHaveBeenCalled();
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    test('disabled tab does not respond to keyboard events', async () => {
+        const user = userEvent.setup();
+        const onTabChange = vi.fn();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", disabled: true, children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        tab2Button.focus();
+        await user.keyboard('{Enter}');
+        expect(onTabChange).not.toHaveBeenCalled();
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    test('applies custom className to tabs container', () => {
+        render(_jsx(Tabs, { className: "custom-tabs", children: _jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }) }));
+        const tabsContainer = screen.getByText('Tab 1').closest('.ds-tabs');
+        expect(tabsContainer).toHaveClass('custom-tabs');
+    });
+    test('applies custom className to tab item', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", className: "custom-tab-item", children: _jsx("div", { children: "Content 1" }) }) }));
+        const tabItem = screen.getByText('Tab 1').closest('.ds-tabs__item');
+        expect(tabItem).toHaveClass('custom-tab-item');
+    });
+    test('has proper ARIA attributes', () => {
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab1Button = screen.getByText('Tab 1');
+        const tab2Button = screen.getByText('Tab 2');
+        expect(tab1Button).toHaveAttribute('role', 'tab');
+        expect(tab1Button).toHaveAttribute('aria-selected', 'true');
+        expect(tab1Button).toHaveAttribute('aria-controls', 'tabpanel-tab1');
+        expect(tab1Button).toHaveAttribute('id', 'tab-tab1');
+        expect(tab2Button).toHaveAttribute('role', 'tab');
+        expect(tab2Button).toHaveAttribute('aria-selected', 'false');
+        expect(tab2Button).toHaveAttribute('aria-controls', 'tabpanel-tab2');
+        expect(tab2Button).toHaveAttribute('id', 'tab-tab2');
+        const contentPanel = screen.getByText('Content 1');
+        expect(contentPanel).toHaveAttribute('role', 'tabpanel');
+        expect(contentPanel).toHaveAttribute('id', 'tabpanel-tab1');
+        expect(contentPanel).toHaveAttribute('aria-labelledby', 'tab-tab1');
+    });
+    test('throws error when Tabs.Item is used outside Tabs context', () => {
+        // Suppress console.error for this test since we expect an error
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        expect(() => {
+            render(_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }));
+        }).toThrow('Tabs.Item must be used within a Tabs component');
+        consoleSpy.mockRestore();
+    });
+    test('renders multiple tabs correctly', () => {
+        render(_jsxs(Tabs, { defaultActiveTab: "tab2", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First Tab", children: _jsx("div", { children: "First Content" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second Tab", children: _jsx("div", { children: "Second Content" }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third Tab", children: _jsx("div", { children: "Third Content" }) })] }));
+        expect(screen.getByText('First Tab')).toBeInTheDocument();
+        expect(screen.getByText('Second Tab')).toBeInTheDocument();
+        expect(screen.getByText('Third Tab')).toBeInTheDocument();
+        expect(screen.getByText('Second Content')).toBeInTheDocument();
+        expect(screen.queryByText('First Content')).not.toBeInTheDocument();
+        expect(screen.queryByText('Third Content')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Tabs.test.js.map

package/dist/components/tabs/Tabs.test.js.map

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

package/dist/index.css

@@ -1,4 +1,4 @@
-@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
+@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -652,25 +652,25 @@
   --form-field-pill-hover-color-text: #2f2f2f;
   --form-field-pill-hover-color-icon: #2f2f2f;
   --form-field-pill-placeholder-color-text: #595959;
-  --form-field-combobox-placeholder-color-background: #ffffff;
-  --form-field-combobox-placeholder-color-border: #dfdfdf;
-  --form-field-combobox-hover-color-border: #7e7e7e;
-  --form-field-combobox-hover-color-background: #ffffff;
-  --form-field-combobox-focus-color-border: #0e8a0e;
-  --form-field-combobox-focus-color-background: #ffffff;
-  --form-field-combobox-error-color-border: #c93232;
-  --form-field-combobox-error-color-background: #ffffff;
-  --form-field-combobox-error-color-error-text: #595959;
-  --form-field-combobox-error-color-error-icon: #c93232;
-  --form-field-combobox-disabled-color-background: #efefef;
-  --form-field-combobox-disabled-color-border: #dfdfdf;
-  --form-field-combobox-default-color-background: #ffffff;
-  --form-field-combobox-default-color-border: #dfdfdf;
-  --form-field-combobox-help-text-default-color-text: #0e8a0e;
-  --form-field-combobox-help-text-default-color-icon: #0e8a0e;
-  --form-field-combobox-help-text-hover-color-text: #005700;
-  --form-field-combobox-help-text-hover-color-icon: #005700;
-  --form-field-combobox-form-numeric: 0rem;
+  --form-field-placeholder-color-background: #ffffff;
+  --form-field-placeholder-color-border: #dfdfdf;
+  --form-field-hover-color-border: #7e7e7e;
+  --form-field-hover-color-background: #ffffff;
+  --form-field-focus-color-border: #0e8a0e;
+  --form-field-focus-color-background: #ffffff;
+  --form-field-error-color-border: #c93232;
+  --form-field-error-color-background: #ffffff;
+  --form-field-error-color-error-text: #595959;
+  --form-field-error-color-error-icon: #c93232;
+  --form-field-disabled-color-background: #efefef;
+  --form-field-disabled-color-border: #dfdfdf;
+  --form-field-default-color-background: #ffffff;
+  --form-field-default-color-border: #dfdfdf;
+  --form-field-help-text-default-color-text: #0e8a0e;
+  --form-field-help-text-default-color-icon: #0e8a0e;
+  --form-field-help-text-hover-color-text: #005700;
+  --form-field-help-text-hover-color-icon: #005700;
+  --form-field-form-numeric: 0rem;
   --form-field-icon-default-color-icon: #2f2f2f;
   --form-field-icon-default-color-background: #ffffff;
   --form-field-icon-hover-color-background: #f8f8f8;
@@ -681,10 +681,13 @@
   --form-field-icon-pressed-color-icon: #2f2f2f;
   --form-field-icon-radius: 6.188rem;
   --form-field-label-color-text: #2f2f2f;
+  --form-field-description-color-text: #595959;
   --form-field-label-color-icon: #2f2f2f;
-  --form-field-spacing-x: 0.25rem;
+  --form-field-spacing-x: 0.5rem;
   --form-field-radius: 0.5rem;
-  --form-field-spacing-y: 0.25rem;
+  --form-field-spacing-y: 0.5rem;
+  --text-field-small-height: 2rem;
+  --text-field-medium-height: 2.25rem;
   --tabs-tab-item-active-default-color-line: #0e8a0e;
   --tabs-tab-item-active-default-color-text: #0e8a0e;
   --tabs-tab-item-active-default-color-icon: #0e8a0e;
@@ -1230,7 +1233,7 @@
   --font-weight-regular: 25rem;
   --font-weight-medium: 31.25rem;
   --font-weight-semi-bold: 37.5rem;
-  --font-weight-bold: 43.75rem;
+  --font-weight-bold: 600;
   --border-radius-xsmall: 0.25rem;
   --border-radius-small: 0.5rem;
   --border-radius-large: 1rem;
@@ -1452,7 +1455,7 @@ h4.ds-heading {
 
 .ds-card__container {
   display: flex;
-  width: 348px;
+  width: 100%;
   padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
   flex-direction: column;
   align-items: flex-start;
@@ -1510,6 +1513,111 @@ h4.ds-heading {
   flex-shrink: 0;
 }
 
+.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;
+}
+.ds-form-field__description {
+  margin-bottom: var(--form-field-spacing-y);
+  color: var(--form-field-description-color-text);
+  display: block;
+}
+.ds-form-field__message {
+  margin-top: var(--form-field-spacing-y);
+}
+.ds-form-field__message--error, .ds-form-field__message--helper {
+  display: flex;
+  align-items: center;
+  margin-top: var(--form-field-spacing-y);
+}
+.ds-form-field__message--error {
+  gap: var(--form-field-spacing-x);
+  color: var(--form-field-error-color-error-text);
+}
+.ds-form-field__message--error .ds-icon {
+  color: var(--form-field-error-color-error-icon);
+}
+.ds-form-field__message--helper {
+  color: var(--form-field-help-text-default-color-text);
+}
+.ds-form-field__message--helper a {
+  color: var(--form-field-help-text-default-color-text);
+  text-decoration: underline;
+}
+
+.ds-input {
+  width: 100%;
+  font-family: var(--font-family-standard);
+  font-weight: var(--font-weight-regular);
+  border: 1px solid var(--form-field-placeholder-color-border);
+  border-radius: var(--form-field-radius);
+  color: var(--colour-grey-900);
+  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+  line-height: 150%;
+  background-color: var(--form-field-placeholder-color-background);
+  padding: 0 var(--form-field-spacing-x);
+  box-sizing: border-box;
+}
+.ds-input::placeholder {
+  color: var(--form-field-pill-placeholder-color-text);
+}
+.ds-input:focus {
+  border-color: var(--form-field-focus-color-border);
+  background-color: var(--form-field-focus-color-background);
+  outline: 2px solid var(--button-medium-primary-focus-color-focus);
+}
+.ds-input:disabled {
+  background-color: var(--colour-grey-100);
+  border-color: var(--colour-grey-200);
+  color: var(--colour-grey-500);
+  cursor: not-allowed;
+}
+.ds-input:disabled::placeholder {
+  color: var(--colour-grey-400);
+}
+.ds-input:disabled:hover {
+  border-color: var(--colour-grey-200);
+}
+.ds-input:hover:not(:disabled, :focus) {
+  border-color: var(--form-field-hover-color-border);
+  background-color: var(--form-field-hover-color-background);
+}
+.ds-input--M {
+  font-size: var(--font-size-3-14);
+  height: var(--text-field-medium-height);
+}
+.ds-input--S {
+  font-size: var(--font-size-2-13);
+  height: var(--text-field-small-height);
+}
+.ds-input--error {
+  border-color: var(--colour-semantic-destructive-500);
+}
+.ds-input--error:focus {
+  border-color: var(--colour-semantic-destructive-500);
+  box-shadow: 0 0 0 2px var(--colour-semantic-destructive-100-hover);
+}
+.ds-input--error:hover:not(:disabled, :focus) {
+  border-color: var(--colour-semantic-destructive-300);
+}
+
+.ds-textarea {
+  padding: var(--form-field-spacing-y) var(--form-field-spacing-x);
+}
+
+.ds-label {
+  font-family: var(--font-family-standard);
+  font-size: var(--font-size-2-13);
+  font-weight: var(--font-weight-bold);
+  color: var(--form-field-label-color-text);
+  line-height: 150%;
+  margin-bottom: var(--form-field-spacing-y);
+  display: block;
+}
+
 .ds-pill {
   display: flex;
   padding: var(--tag-spacing-x, 8px) var(--tag-spacing-y, 12px);

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/pill/pill.scss"],"names":[],"mappings":"AAMQ;ACNR;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/tCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AChBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;;AClLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AC7CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;ACjEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/formField/formField.scss","../src/components/formField/inputs/input.scss","../src/components/formField/label/label.scss","../src/components/pill/pill.scss"],"names":[],"mappings":"AASQ;ACTR;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACluCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AChBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;;AClLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AC7CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;ACjEJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;;;AClCR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;;;ACzEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"index.css"}

package/dist/index.d.ts

@@ -4,4 +4,6 @@ export { HeadingInnerContainer } from './components/heading/HeadingInnerContaine
 export { Icon } from './components/icon/Icon';
 export { Card } from './components/card/Card';
 export { Pill } from './components/pill/Pill';
+export { TextInput } from './components/formField/inputs/text/TextInput';
+export { TextArea } from './components/formField/inputs/textArea/TextArea';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC"}

package/dist/index.js

@@ -4,4 +4,6 @@ export { HeadingInnerContainer } from './components/heading/HeadingInnerContaine
 export { Icon } from './components/icon/Icon';
 export { Card } from './components/card/Card';
 export { Pill } from './components/pill/Pill';
+export { TextInput } from './components/formField/inputs/text/TextInput';
+export { TextArea } from './components/formField/inputs/textArea/TextArea';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "repository": {
@@ -31,6 +31,8 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.7.0",
     "@vitejs/plugin-react": "^5.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
@@ -46,8 +48,10 @@
     "lint-staged": "^16.2.3",
     "playwright": "^1.55.0",
     "storybook": "^9.1.8",
+    "storybook-addon-deep-controls": "^0.9.5",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
+    "tsc-alias": "^1.8.16",
     "tsc-watch": "^7.1.1",
     "typescript-eslint": "^8.40.0",
     "vite": "^7.1.3",
@@ -61,12 +65,15 @@
     "tsc": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsc && sass src/index.scss dist/index.css",
-    "watch": "sass --watch src/index.scss dist/index.css & tsc-watch --onSuccess \"yalc push --private --sig\"",
+    "build": "tsc && tsc-alias && sass src/index.scss dist/index.css",
+    "tsc-watch-command": "tsc-alias && yalc push --private --sig",
+    "watch": "sass --watch src/index.scss dist/index.css & tsc-watch --onSuccess \"yarn tsc-watch-command\"",
     "test": "vitest",
     "create-component": "./bin/createComponent.sh",
     "prepare": "husky",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build",
+    "check-types": "tsc --noEmit",
+    "style-lint": "stylelint src/**/*.scss"
   },
   "types": "./dist/index.d.ts",
   "bugs": {

package/src/components/card/card.scss

@@ -1,6 +1,6 @@
 .ds-card__container {
   display: flex;
-  width: 348px;
+  width: 100%;
   padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
   flex-direction: column;
   align-items: flex-start;