From 7f43af04ab6658fe97e2eacaeb49a7e0be23222b Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 13 Jun 2024 10:51:24 -0700
Subject: [PATCH 01/45] TextField component

Co-Authored-By: Tyler Krys <Tyler.Krys@gov.bc.ca>
---
 packages/react-components/src/App.tsx         |   9 +-
 .../src/components/TextField/TextField.css    | 120 +++++++++++
 .../src/components/TextField/TextField.tsx    |  90 +++++++++
 .../src/components/TextField/index.ts         |   2 +
 .../react-components/src/components/index.ts  |   1 +
 .../src/pages/TextField/TextField.tsx         |  10 +
 .../src/pages/TextField/index.ts              |   3 +
 packages/react-components/src/pages/index.ts  |   3 +-
 .../src/stories/TextField.mdx                 |  94 +++++++++
 .../src/stories/TextField.stories.tsx         | 190 ++++++++++++++++++
 10 files changed, 520 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-components/src/components/TextField/TextField.css
 create mode 100644 packages/react-components/src/components/TextField/TextField.tsx
 create mode 100644 packages/react-components/src/components/TextField/index.ts
 create mode 100644 packages/react-components/src/pages/TextField/TextField.tsx
 create mode 100644 packages/react-components/src/pages/TextField/index.ts
 create mode 100644 packages/react-components/src/stories/TextField.mdx
 create mode 100644 packages/react-components/src/stories/TextField.stories.tsx

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index 9e718c67..e34a595a 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -6,7 +6,13 @@ import "@bcgov/bc-sans/css/BC_Sans.css";
 
 import { Button, Footer, FooterLinks, Header } from "@/components";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { ButtonPage, SelectPage, TagGroupPage, TooltipPage } from "@/pages";
+import {
+  ButtonPage,
+  SelectPage,
+  TagGroupPage,
+  TooltipPage,
+  TextFieldPage,
+} from "@/pages";
 
 // This icon is available as a plain SVG at src/assets/icon-menu.svg
 function SvgMenuIcon() {
@@ -142,6 +148,7 @@ function App() {
         <SelectPage />
         <TagGroupPage />
         <TooltipPage />
+        <TextFieldPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
new file mode 100644
index 00000000..4a2c455b
--- /dev/null
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -0,0 +1,120 @@
+.bcds-react-aria-TextField {
+  display: inline-flex;
+  flex-direction: column;
+  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
+  align-self: stretch;
+  max-width: -moz-available;
+  max-width: -webkit-fill-available;
+}
+
+/* Styles for the text label above the input field */
+.bcds-react-aria-TextField--Label {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-primary);
+  padding: var(--layout-margin-hair) 0px;
+}
+
+.bcds-react-aria-TextField--Label .required {
+  color: var(--typography-color-secondary);
+  padding: var(--layout-padding-none) var(--layout-padding-xsmall);
+}
+
+/* Styles for the text description below the input field */
+.bcds-react-aria-TextField--Description {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
+}
+
+/* Styles for the input field container */
+.bcds-react-aria-TextField--container {
+  color: var(--typography-color-primary);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--layout-margin-small);
+  background: var(--surface-color-forms-default);
+  box-sizing: border-box;
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  margin: var(--layout-margin-small) var(--layout-margin-none);
+  padding: var(--layout-padding-small) 12px;
+}
+
+.bcds-react-aria-TextField--Input {
+  border: none;
+  flex-grow: 1;
+}
+
+/* Sizes */
+.bcds-react-aria-TextField--container.small {
+  /* using margin token is kludgy, consider adding component-specific token for input sizing */
+  height: var(--layout-margin-xlarge);
+}
+
+.bcds-react-aria-TextField--container.medium {
+  /* using margin token is kludgy, consider adding component-specific token for input sizing */
+  height: var(--layout-margin-xxlarge);
+}
+
+/* Text input field */
+.bcds-react-aria-TextField--Input {
+  font: var(--typography-regular-body);
+  padding: var(--layout-padding-none);
+}
+
+/* Hover and focus states */
+
+.bcds-react-aria-TextField--container
+  > .bcds-react-aria-TextField--Input[data-focused] {
+  outline: none;
+}
+
+.bcds-react-aria-TextField--container:focus-within {
+  border-radius: var(--layout-border-radius-large);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-active);
+  outline: solid var(--layout-border-width-medium)
+    var(--surface-color-border-active);
+  outline-offset: var(--layout-margin-hair);
+}
+
+.bcds-react-aria-TextField--container:hover {
+  border-color: var(--surface-color-border-dark);
+}
+
+/* Disabled and invalid states */
+
+.bcds-react-aria-TextField[data-disabled]
+  > .bcds-react-aria-TextField--container {
+  background: var(--surface-color-forms-disabled);
+  cursor: not-allowed;
+}
+
+.bcds-react-aria-TextField--Input[data-disabled] {
+  cursor: not-allowed;
+}
+
+.bcds-react-aria-TextField[data-invalid]
+  > .bcds-react-aria-TextField--container {
+  border-radius: var(--layout-border-radius-medium);
+  border: 1px solid var(--support-border-color-danger);
+  background: var(--surface-color-forms-default);
+}
+
+.bcds-react-aria-TextField[data-readonly]
+  > .bcds-react-aria-TextField--container {
+  background: var(--surface-color-forms-disabled);
+}
+
+.bcds-react-aria-TextField[data-readonly]
+  > .bcds-react-aria-TextField--container
+  > .bcds-react-aria-TextField--Input {
+  background: var(--surface-color-forms-disabled);
+}
+
+/* Styles for the error message slot */
+.bcds-react-aria-TextField--Error {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-danger);
+}
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
new file mode 100644
index 00000000..f10edf5a
--- /dev/null
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -0,0 +1,90 @@
+import {
+  TextField as ReactAriaTextField,
+  TextFieldProps as ReactAriaTextFieldProps,
+  Input,
+  Label,
+  FieldError,
+  Text,
+  ValidationResult,
+} from "react-aria-components";
+
+import "./TextField.css";
+
+export interface TextFieldProps extends ReactAriaTextFieldProps {
+  /* Sets size of text input field */
+  size?: "medium" | "small";
+  /* Sets text label above text input field */
+  label?: string;
+  /* Sets optional description text below text input field */
+  description?: string;
+  /* Used for data validation and error handling */
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  /* Icon slot to left of text input field */
+  iconLeft?: React.ReactElement;
+  /* Icon slot to right of text input field */
+  iconRight?: React.ReactElement;
+}
+
+/* Icon displayed when input is in invalid state */
+const iconError = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Error icon">
+      <path
+        id="Icon"
+        d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
+        fill="var(--icons-color-danger)"
+      />
+    </g>
+  </svg>
+);
+
+export default function TextField({
+  size = "medium",
+  label,
+  description,
+  errorMessage,
+  iconLeft,
+  iconRight,
+  ...props
+}: TextFieldProps) {
+  return (
+    <ReactAriaTextField className="bcds-react-aria-TextField" {...props}>
+      {({ isRequired, isInvalid }) => (
+        <>
+          {label && (
+            <Label className="bcds-react-aria-TextField--Label">
+              {label}
+              {isRequired && (
+                <span className="bcds-react-aria-TextField--Label required">
+                  (required)
+                </span>
+              )}
+            </Label>
+          )}
+          <div className={`bcds-react-aria-TextField--container ${size}`}>
+            {iconLeft}
+            <Input className="bcds-react-aria-TextField--Input" />
+            {isInvalid && iconError}
+            {iconRight}
+          </div>
+          {description && (
+            <Text
+              slot="description"
+              className={`bcds-react-aria-TextField--Description`}
+            >
+              {description}
+            </Text>
+          )}
+          <FieldError className="bcds-react-aria-TextField--Error">
+            {errorMessage}
+          </FieldError>
+        </>
+      )}
+    </ReactAriaTextField>
+  );
+}
diff --git a/packages/react-components/src/components/TextField/index.ts b/packages/react-components/src/components/TextField/index.ts
new file mode 100644
index 00000000..3e6d8643
--- /dev/null
+++ b/packages/react-components/src/components/TextField/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./TextField";
+export type { TextFieldProps } from "./TextField";
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
index d5e36eaf..a2408fab 100644
--- a/packages/react-components/src/components/index.ts
+++ b/packages/react-components/src/components/index.ts
@@ -8,4 +8,5 @@ export { default as SvgBcLogo } from "./SvgBcLogo";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
+export { default as TextField } from "./TextField";
 export { default as Tooltip, TooltipTrigger } from "./Tooltip";
diff --git a/packages/react-components/src/pages/TextField/TextField.tsx b/packages/react-components/src/pages/TextField/TextField.tsx
new file mode 100644
index 00000000..0e4d3937
--- /dev/null
+++ b/packages/react-components/src/pages/TextField/TextField.tsx
@@ -0,0 +1,10 @@
+import { TextField } from "@/components";
+
+export default function TextFieldPage() {
+  return (
+    <>
+      <h2>TextField</h2>
+      <TextField />
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/TextField/index.ts b/packages/react-components/src/pages/TextField/index.ts
new file mode 100644
index 00000000..61f22677
--- /dev/null
+++ b/packages/react-components/src/pages/TextField/index.ts
@@ -0,0 +1,3 @@
+import TextFieldPage from "./TextField";
+
+export default TextFieldPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index c80b74e9..d55e10a1 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -1,6 +1,7 @@
 import ButtonPage from "./Button";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
+import TextFieldPage from "./TextField";
 import TooltipPage from "./Tooltip";
 
-export { ButtonPage, SelectPage, TagGroupPage, TooltipPage };
+export { ButtonPage, SelectPage, TagGroupPage, TextFieldPage, TooltipPage };
diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
new file mode 100644
index 00000000..8cab1993
--- /dev/null
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -0,0 +1,94 @@
+{/* TextField.mdx */}
+
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Primary,
+  Source,
+  Story,
+  Subtitle,
+} from "@storybook/blocks";
+
+import * as TextFieldStories from "./TextField.stories";
+
+<Meta of={TextFieldStories} />
+
+# Text Field
+
+<Subtitle>
+  The text field component enables a user to enter text into an interface or
+  form.
+</Subtitle>
+
+<Source
+  code={`import { TextField } from "@bcgov/design-system-react-components"; `}
+  language="typescript"
+/>
+
+## Usage and resources
+
+Learn more about working with the text field component:
+
+- [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content/digital/design-system/components/text-field)
+- [View the text field component in Figma](#)
+
+This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html). Consult the React Aria documentation for additional technical information and a full list of supported props.
+
+### Validation
+
+Default and custom data validation support is built in, using the [React Aria FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/forms.html#validation).
+
+## Controls
+
+<Primary of={TextFieldStories} />
+<Controls of={TextFieldStories.TextFieldTemplate} />
+
+## Configuration
+
+### Size
+
+The `size` prop enables you to choose between medium (default) and small (reduced height) versions:
+
+<Canvas of={TextFieldStories.MediumTextField} />
+<Canvas of={TextFieldStories.SmallTextField} />
+
+### Required
+
+By default, input fields are marked as optional. Use the `isRequired` prop to mark an input as required, and display a text label:
+
+<Canvas of={TextFieldStories.RequiredTextField} />
+
+### Icons
+
+You can display icons in a text field by passing an image to either or both of the `iconLeft` and `iconRight` slots:
+
+<Canvas of={TextFieldStories.TextFieldWithIcons} />
+
+Icons can be used to provide an additional visual indicator of a text field's function, like a search field:
+
+<Canvas of={TextFieldStories.SearchField} />
+
+### Input types
+
+Use the `type` prop to define the type of input a text field expects. If no `type` prop is provided, the attribute defaults to `text`.
+
+For example, setting the type to `password` automatically obscures input:
+
+<Canvas of={TextFieldStories.PasswordField} />
+
+Types like `url`, `tel` or `email` are used for data validation. Consult the MDN documentation for [a full list of valid input type attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
+
+### States
+
+Use `isDisabled` to disable a text field. A disabled field cannot be focused or interacted with:
+
+<Canvas of={TextFieldStories.DisabledTextField} />
+
+Use `isReadOnly` to lock a field to its current value. A read-only input can be focused and copied, but cannot be edited:
+
+<Canvas of={TextFieldStories.ReadOnlyTextField} />
+
+The `isInvalid` prop should be set programmatically when an input is invalid. It renders an error icon in the input field, changes the border colour and displays an `errorMessage` (using the [FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/TextField.html#validation)):
+
+<Canvas of={TextFieldStories.TextFieldError} />
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
new file mode 100644
index 00000000..fa9bb380
--- /dev/null
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TextField } from "../components";
+
+const meta = {
+  title: "Components/TextField/TextField",
+  component: TextField,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+      control: { type: "radio" },
+      description: "Defaults to 'medium', also supports 'small'",
+    },
+    type: {
+      options: ["text", "search", "email", "url", "tel", "password"],
+      control: { type: "radio" },
+    },
+    value: {
+      control: { type: "text" },
+      description: "Input value",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Text that appears above the input field",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Is this input required?",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Is the input disabled?",
+    },
+    isInvalid: {
+      control: "boolean",
+      description: "Is the user's input valid?",
+    },
+    isReadOnly: {
+      control: "boolean",
+      description: "Locks the field to its current value",
+    },
+    minLength: {
+      control: "number",
+      description: "Minimum character length for this input",
+    },
+    maxLength: {
+      control: "number",
+      description: "Maximum character length for this input",
+    },
+  },
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextFieldTemplate: Story = {
+  args: {
+    label: "Label",
+    size: "medium",
+    type: "text",
+    description: "Optional description or helper text",
+  },
+};
+
+export const MediumTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    description: "This is the default/medium size variant of the input field",
+  },
+};
+
+export const SmallTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    size: "small",
+    description: "The small size variant has reduced height",
+  },
+};
+
+export const RequiredTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    isRequired: true,
+  },
+};
+
+const iconPlaceholder = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Icon placeholder" clip-path="url(#clip0_717_6325)">
+      <path
+        id="Icon"
+        d="M9.99996 18.3333C14.6023 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6023 1.66663 9.99996 1.66663C5.39759 1.66663 1.66663 5.39759 1.66663 9.99996C1.66663 14.6023 5.39759 18.3333 9.99996 18.3333Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_717_6325">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const iconSearch = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+  >
+    <path
+      d="M14.4479 13.2956C14.7213 13.569 14.7213 13.9792 14.4479 14.2253C14.3385 14.362 14.1745 14.4167 14.0104 14.4167C13.819 14.4167 13.6549 14.362 13.5182 14.2253L9.85416 10.5612C8.86978 11.3542 7.63931 11.7917 6.32681 11.7917C3.20963 11.7917 0.666656 9.24869 0.666656 6.10416C0.666656 2.98697 3.18228 0.416656 6.32681 0.416656C9.444 0.416656 12.0143 2.98697 12.0143 6.10416C12.0143 7.444 11.5768 8.67447 10.7838 9.6315L14.4479 13.2956ZM1.97916 6.10416C1.97916 8.53775 3.92056 10.4792 6.35416 10.4792C8.76041 10.4792 10.7292 8.53775 10.7292 6.10416C10.7292 3.69791 8.76041 1.72916 6.35416 1.72916C3.92056 1.72916 1.97916 3.69791 1.97916 6.10416Z"
+      fill="#2D2D2D"
+    />
+  </svg>
+);
+
+export const TextFieldWithIcons: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    iconLeft: iconPlaceholder,
+    iconRight: iconPlaceholder,
+    description: "You can use either, both or neither icon slot as needed",
+  },
+};
+
+export const SearchField: Story = {
+  args: {
+    label: "Search",
+    size: "medium",
+    type: "search",
+    iconLeft: iconSearch,
+    description: "Icon slots can be used to provide additional visual context",
+  },
+};
+
+export const PasswordField: Story = {
+  args: {
+    label: "Password",
+    size: "medium",
+    type: "password",
+    value: "password",
+    description: "Input is automatically obscured",
+  },
+};
+
+export const DisabledTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    description: "This field is disabled and cannot be interacted with",
+    isDisabled: true,
+  },
+};
+
+export const ReadOnlyTextField: Story = {
+  args: {
+    label: "Label",
+    size: "medium",
+    type: "text",
+    value: "This field is locked",
+    description: "Input can be selected and copied but not edited",
+    isReadOnly: true,
+  },
+};
+
+export const TextFieldError: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    label: "This is a URL field",
+    type: "url",
+    value: "This value is invalid",
+    description:
+      "This component supports custom, real-time and server-side data validation",
+    isInvalid: true,
+    errorMessage: "Error messages can be customised or passed programmatically",
+  },
+};

From 6afaefadc5aa8c476a2584e3150174876ab19335 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:41:48 -0700
Subject: [PATCH 02/45] fork Text Field component into Text Area, replacing
 <Input> with <TextArea>

---
 .../src/components/TextArea/TextArea.css      | 119 ++++++++++++++++++
 .../src/components/TextArea/TextArea.tsx      |  79 ++++++++++++
 .../src/components/TextArea/index.ts          |   2 +
 .../react-components/src/components/index.ts  |   1 +
 .../react-components/src/stories/TextArea.mdx |  19 +++
 .../src/stories/TextArea.stories.tsx          |  55 ++++++++
 6 files changed, 275 insertions(+)
 create mode 100644 packages/react-components/src/components/TextArea/TextArea.css
 create mode 100644 packages/react-components/src/components/TextArea/TextArea.tsx
 create mode 100644 packages/react-components/src/components/TextArea/index.ts
 create mode 100644 packages/react-components/src/stories/TextArea.mdx
 create mode 100644 packages/react-components/src/stories/TextArea.stories.tsx

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
new file mode 100644
index 00000000..6af297a8
--- /dev/null
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -0,0 +1,119 @@
+.bcds-react-aria-TextArea {
+  display: inline-flex;
+  flex-direction: column;
+  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
+  align-self: stretch;
+  max-width: -moz-available;
+  max-width: -webkit-fill-available;
+}
+
+/* Styles for the text label above the input field */
+.bcds-react-aria-TextArea--Label {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-primary);
+  padding: var(--layout-margin-hair) 0px;
+}
+
+.bcds-react-aria-TextArea--Label .required {
+  color: var(--typography-color-secondary);
+  padding: var(--layout-padding-none) var(--layout-padding-xsmall);
+}
+
+/* Styles for the text description below the input field */
+.bcds-react-aria-TextArea--Description {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
+}
+
+/* Styles for the input field container */
+.bcds-react-aria-TextArea--container {
+  color: var(--typography-color-primary);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--layout-margin-small);
+  background: var(--surface-color-forms-default);
+  box-sizing: border-box;
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  margin: var(--layout-margin-small) var(--layout-margin-none);
+  padding: var(--layout-padding-small) 12px;
+}
+
+.bcds-react-aria-TextArea--Input {
+  border: none;
+  flex-grow: 1;
+}
+
+/* Sizes */
+.bcds-react-aria-TextArea--container.small {
+  /* using margin token is kludgy, consider adding component-specific token for input sizing */
+  height: var(--layout-margin-xlarge);
+}
+
+.bcds-react-aria-TextArea--container.medium {
+  /* using margin token is kludgy, consider adding component-specific token for input sizing */
+  height: var(--layout-margin-xxlarge);
+}
+
+/* Text input field */
+.bcds-react-aria-TextArea--Input {
+  font: var(--typography-regular-body);
+  padding: var(--layout-padding-none);
+}
+
+/* Hover and focus states */
+
+.bcds-react-aria-TextArea--container
+  > .bcds-react-aria-TextArea--Input[data-focused] {
+  outline: none;
+}
+
+.bcds-react-aria-TextArea--container:focus-within {
+  border-radius: var(--layout-border-radius-large);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-active);
+  outline: solid var(--layout-border-width-medium)
+    var(--surface-color-border-active);
+  outline-offset: var(--layout-margin-hair);
+}
+
+.bcds-react-aria-TextArea--container:hover {
+  border-color: var(--surface-color-border-dark);
+}
+
+/* Disabled and invalid states */
+
+.bcds-react-aria-TextArea[data-disabled]
+  > .bcds-react-aria-TextArea--container {
+  background: var(--surface-color-forms-disabled);
+  cursor: not-allowed;
+}
+
+.bcds-react-aria-TextArea--Input[data-disabled] {
+  cursor: not-allowed;
+}
+
+.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--container {
+  border-radius: var(--layout-border-radius-medium);
+  border: 1px solid var(--support-border-color-danger);
+  background: var(--surface-color-forms-default);
+}
+
+.bcds-react-aria-TextArea[data-readonly]
+  > .bcds-react-aria-TextArea--container {
+  background: var(--surface-color-forms-disabled);
+}
+
+.bcds-react-aria-TextArea[data-readonly]
+  > .bcds-react-aria-TextArea--container
+  > .bcds-react-aria-TextArea--Input {
+  background: var(--surface-color-forms-disabled);
+}
+
+/* Styles for the error message slot */
+.bcds-react-aria-TextArea--Error {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-danger);
+}
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
new file mode 100644
index 00000000..649e6bd7
--- /dev/null
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,79 @@
+import {
+  TextField as ReactAriaTextField,
+  TextFieldProps as ReactAriaTextFieldProps,
+  TextArea as ReactAriaTextArea,
+  Label,
+  FieldError,
+  Text,
+  ValidationResult,
+} from "react-aria-components";
+
+import "./TextArea.css";
+
+export interface TextAreaProps extends ReactAriaTextFieldProps {
+  /* Sets text label above text input field */
+  label?: string;
+  /* Sets optional description text below text input field */
+  description?: string;
+  /* Used for data validation and error handling */
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+/* Icon displayed when input is in invalid state */
+const iconError = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Error icon">
+      <path
+        id="Icon"
+        d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
+        fill="var(--icons-color-danger)"
+      />
+    </g>
+  </svg>
+);
+
+export default function TextArea({
+  label,
+  description,
+  errorMessage,
+  ...props
+}: TextAreaProps) {
+  return (
+    <ReactAriaTextField className="bcds-react-aria-TextArea" {...props}>
+      {({ isRequired, isInvalid }) => (
+        <>
+          {label && (
+            <Label className="bcds-react-aria-TextArea--Label">
+              {label}
+              {isRequired && (
+                <span className="bcds-react-aria-TextArea--Label required">
+                  (required)
+                </span>
+              )}
+            </Label>
+          )}
+          <div className={`bcds-react-aria-TextArea--container`}>
+            {isInvalid && iconError}
+            <ReactAriaTextArea className="bcds-react-aria-TextArea--Input" />
+          </div>
+          {description && (
+            <Text
+              slot="description"
+              className={`bcds-react-aria-TextArea--Description`}
+            >
+              {description}
+            </Text>
+          )}
+          <FieldError className="bcds-react-aria-TextArea--Error">
+            {errorMessage}
+          </FieldError>
+        </>
+      )}
+    </ReactAriaTextField>
+  );
+}
diff --git a/packages/react-components/src/components/TextArea/index.ts b/packages/react-components/src/components/TextArea/index.ts
new file mode 100644
index 00000000..f254d030
--- /dev/null
+++ b/packages/react-components/src/components/TextArea/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./TextArea";
+export type { TextAreaProps } from "./TextArea";
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
index a2408fab..aa8edde7 100644
--- a/packages/react-components/src/components/index.ts
+++ b/packages/react-components/src/components/index.ts
@@ -9,4 +9,5 @@ export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
 export { default as TextField } from "./TextField";
+export { default as TextArea } from "./TextArea";
 export { default as Tooltip, TooltipTrigger } from "./Tooltip";
diff --git a/packages/react-components/src/stories/TextArea.mdx b/packages/react-components/src/stories/TextArea.mdx
new file mode 100644
index 00000000..9381d44c
--- /dev/null
+++ b/packages/react-components/src/stories/TextArea.mdx
@@ -0,0 +1,19 @@
+{/* TextArea.mdx */}
+
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Primary,
+  Source,
+  Story,
+  Subtitle,
+} from "@storybook/blocks";
+
+import * as TextAreaStories from "./TextArea.stories";
+
+<Meta of={TextAreaStories} />
+
+# Text Area
+
+TKTK
diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
new file mode 100644
index 00000000..7f40d13c
--- /dev/null
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TextArea } from "../components";
+
+const meta = {
+  title: "Components/TextArea",
+  component: TextArea,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    value: {
+      control: { type: "text" },
+      description: "Input value",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Text that appears above the input field",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Is this input required?",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Is the input disabled?",
+    },
+    isInvalid: {
+      control: "boolean",
+      description: "Is the user's input valid?",
+    },
+    isReadOnly: {
+      control: "boolean",
+      description: "Locks the field to its current value",
+    },
+    minLength: {
+      control: "number",
+      description: "Minimum character length for this input",
+    },
+    maxLength: {
+      control: "number",
+      description: "Maximum character length for this input",
+    },
+  },
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextAreaTemplate: Story = {
+  args: {
+    label: "Label",
+    description: "Optional description or helper text",
+  },
+};

From 89e4f968062f9a9477982427397706bfdc0d237f Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:47:02 -0700
Subject: [PATCH 03/45] stage TextArea on vite

---
 packages/react-components/src/App.tsx                  |  2 ++
 .../react-components/src/pages/TextArea/TextArea.tsx   | 10 ++++++++++
 packages/react-components/src/pages/TextArea/index.ts  |  3 +++
 packages/react-components/src/pages/index.ts           | 10 +++++++++-
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-components/src/pages/TextArea/TextArea.tsx
 create mode 100644 packages/react-components/src/pages/TextArea/index.ts

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index e34a595a..fee9bd76 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -12,6 +12,7 @@ import {
   TagGroupPage,
   TooltipPage,
   TextFieldPage,
+  TextAreaPage,
 } from "@/pages";
 
 // This icon is available as a plain SVG at src/assets/icon-menu.svg
@@ -149,6 +150,7 @@ function App() {
         <TagGroupPage />
         <TooltipPage />
         <TextFieldPage />
+        <TextAreaPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/pages/TextArea/TextArea.tsx b/packages/react-components/src/pages/TextArea/TextArea.tsx
new file mode 100644
index 00000000..b5fd5f96
--- /dev/null
+++ b/packages/react-components/src/pages/TextArea/TextArea.tsx
@@ -0,0 +1,10 @@
+import { TextArea } from "@/components";
+
+export default function TextAreaPage() {
+  return (
+    <>
+      <h2>TextArea</h2>
+      <TextArea />
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/TextArea/index.ts b/packages/react-components/src/pages/TextArea/index.ts
new file mode 100644
index 00000000..3bd4155a
--- /dev/null
+++ b/packages/react-components/src/pages/TextArea/index.ts
@@ -0,0 +1,3 @@
+import TextAreaPage from "./TextArea";
+
+export default TextAreaPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index d55e10a1..545d432c 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -2,6 +2,14 @@ import ButtonPage from "./Button";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
 import TextFieldPage from "./TextField";
+import TextAreaPage from "./TextArea";
 import TooltipPage from "./Tooltip";
 
-export { ButtonPage, SelectPage, TagGroupPage, TextFieldPage, TooltipPage };
+export {
+  ButtonPage,
+  SelectPage,
+  TagGroupPage,
+  TextFieldPage,
+  TextAreaPage,
+  TooltipPage,
+};

From a922dd77119620cb58e420fc69dee246085a27d9 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 26 Jun 2024 11:31:03 -0700
Subject: [PATCH 04/45] remove unused size styles

---
 .../src/components/TextArea/TextArea.css              | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 6af297a8..5cdd2cd3 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -46,17 +46,6 @@
   flex-grow: 1;
 }
 
-/* Sizes */
-.bcds-react-aria-TextArea--container.small {
-  /* using margin token is kludgy, consider adding component-specific token for input sizing */
-  height: var(--layout-margin-xlarge);
-}
-
-.bcds-react-aria-TextArea--container.medium {
-  /* using margin token is kludgy, consider adding component-specific token for input sizing */
-  height: var(--layout-margin-xxlarge);
-}
-
 /* Text input field */
 .bcds-react-aria-TextArea--Input {
   font: var(--typography-regular-body);

From 2152c2633f3bf56ac1a246dc7107d5571dd7a772 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 26 Jun 2024 13:38:12 -0700
Subject: [PATCH 05/45] group textfield and textarea together in storybook

---
 packages/react-components/src/stories/TextArea.stories.tsx  | 2 +-
 packages/react-components/src/stories/TextField.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
index 7f40d13c..f26fde6b 100644
--- a/packages/react-components/src/stories/TextArea.stories.tsx
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextArea } from "../components";
 
 const meta = {
-  title: "Components/TextArea",
+  title: "Components/Text Input/TextArea",
   component: TextArea,
   parameters: {
     layout: "centered",
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index fa9bb380..f61f0dc8 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextField } from "../components";
 
 const meta = {
-  title: "Components/TextField/TextField",
+  title: "Components/Text Input/TextField",
   component: TextField,
   parameters: {
     layout: "centered",

From b7ece20a468cc017d1d8476895c15f312273850e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 26 Jun 2024 13:53:34 -0700
Subject: [PATCH 06/45] add error state story

---
 .../react-components/src/stories/TextArea.stories.tsx  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
index f26fde6b..bcab28da 100644
--- a/packages/react-components/src/stories/TextArea.stories.tsx
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -53,3 +53,13 @@ export const TextAreaTemplate: Story = {
     description: "Optional description or helper text",
   },
 };
+
+export const TextAreaError: Story = {
+  args: {
+    label: "Label",
+    description: "Optional description or helper text",
+    isRequired: true,
+    isInvalid: true,
+    errorMessage: "Error message",
+  },
+};

From 5c229281a0a56b05cc0d1d6bc82fe577a7b46d86 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 27 Jun 2024 09:44:52 -0700
Subject: [PATCH 07/45] front matter for textarea docs

---
 .../react-components/src/stories/TextArea.mdx | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextArea.mdx b/packages/react-components/src/stories/TextArea.mdx
index 9381d44c..3ae7201e 100644
--- a/packages/react-components/src/stories/TextArea.mdx
+++ b/packages/react-components/src/stories/TextArea.mdx
@@ -16,4 +16,27 @@ import * as TextAreaStories from "./TextArea.stories";
 
 # Text Area
 
-TKTK
+<Subtitle>
+  The text area component enables a user to enter multiple lines of plain text
+  into an interface or form.
+</Subtitle>
+
+<Source
+  code={`import { TextArea } from "@bcgov/design-system-react-components"; `}
+  language="typescript"
+/>
+## Usage and resources
+
+Learn more about working with the text area component:
+
+- [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content/digital/design-system/components/text-area)
+- [View the text field component in Figma](#)
+
+This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html#multi-line).
+
+## Controls
+
+<Primary of={TextAreaStories} />
+<Controls of={TextAreaStories.TextAreaTemplate} />
+
+## Configuration

From 30b1a3e0fe062f888267d5382bb7c966acb2aa07 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 27 Jun 2024 13:58:45 -0700
Subject: [PATCH 08/45] add demo form to vite app

---
 packages/react-components/src/App.tsx         |  2 +
 .../react-components/src/pages/Form/Form.tsx  | 68 +++++++++++++++++++
 .../react-components/src/pages/Form/index.ts  |  3 +
 packages/react-components/src/pages/index.ts  |  2 +
 4 files changed, 75 insertions(+)
 create mode 100644 packages/react-components/src/pages/Form/Form.tsx
 create mode 100644 packages/react-components/src/pages/Form/index.ts

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index fee9bd76..1495c1af 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -8,6 +8,7 @@ import { Button, Footer, FooterLinks, Header } from "@/components";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import {
   ButtonPage,
+  FormPage,
   SelectPage,
   TagGroupPage,
   TooltipPage,
@@ -151,6 +152,7 @@ function App() {
         <TooltipPage />
         <TextFieldPage />
         <TextAreaPage />
+        <FormPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/pages/Form/Form.tsx b/packages/react-components/src/pages/Form/Form.tsx
new file mode 100644
index 00000000..86270dd4
--- /dev/null
+++ b/packages/react-components/src/pages/Form/Form.tsx
@@ -0,0 +1,68 @@
+import {
+  Button,
+  Select,
+  TextArea,
+  TextField,
+  Tooltip,
+  TooltipTrigger,
+} from "@/components";
+
+import { Form } from "react-aria-components";
+
+export default function FormPage() {
+  return (
+    <>
+      <Form id="bcds-form">
+        <h2>Composed form</h2>
+        <div>
+          <TextField isRequired label="Name" name="name" />
+        </div>
+        <div>
+          <TextField
+            isRequired
+            type="email"
+            name="email"
+            label="Email address"
+          />
+        </div>
+        <div>
+          <Select
+            items={[
+              {
+                id: "1",
+                label: "Victoria",
+              },
+              {
+                id: "2",
+                label: "Vancouver",
+              },
+              {
+                id: "3",
+                label: "Kelowna",
+              },
+            ]}
+            label="City"
+            name="city"
+          />
+        </div>
+        <div>
+          <TextField type="url" label="Website" name="url" />
+        </div>
+        <div>
+          <TextArea label="Comments" name="comments" />
+        </div>
+        <div>
+          <TooltipTrigger delay={0} closeDelay={1000}>
+            <Button variant="primary" size="small" type="submit">
+              Submit
+            </Button>
+            <Tooltip placement="right">
+              This is a dummy button, that will show validation errors but
+              doesn't submit any data
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </Form>
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/Form/index.ts b/packages/react-components/src/pages/Form/index.ts
new file mode 100644
index 00000000..aee0bd85
--- /dev/null
+++ b/packages/react-components/src/pages/Form/index.ts
@@ -0,0 +1,3 @@
+import FormPage from "./Form";
+
+export default FormPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index 545d432c..41dea9b3 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -1,4 +1,5 @@
 import ButtonPage from "./Button";
+import FormPage from "./Form";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
 import TextFieldPage from "./TextField";
@@ -7,6 +8,7 @@ import TooltipPage from "./Tooltip";
 
 export {
   ButtonPage,
+  FormPage,
   SelectPage,
   TagGroupPage,
   TextFieldPage,

From 88ffc050d348acc097d0646a9cd42bb5a725f6ea Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 2 Jul 2024 13:40:34 -0700
Subject: [PATCH 09/45] add min-height to input field

---
 .../react-components/src/components/TextField/TextField.css     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 4a2c455b..73e09b3e 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -50,11 +50,13 @@
 .bcds-react-aria-TextField--container.small {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
   height: var(--layout-margin-xlarge);
+  min-height: var(--layout-margin-xlarge);
 }
 
 .bcds-react-aria-TextField--container.medium {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
   height: var(--layout-margin-xxlarge);
+  min-height: var(--layout-margin-xxlarge);
 }
 
 /* Text input field */

From aabd76be957a21e15acb837b286c8705e589fbf6 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:10:53 -0700
Subject: [PATCH 10/45] first pass at adding character counter

---
 .../react-components/src/components/TextArea/TextArea.css   | 5 +++++
 .../react-components/src/components/TextArea/TextArea.tsx   | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 5cdd2cd3..980bbc09 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -25,6 +25,11 @@
   color: var(--typography-color-secondary);
 }
 
+.bcds-react-aria-TextArea--Counter {
+  padding-left: var(--layout-padding-medium);
+  color: var(--typography-color-placeholder);
+}
+
 /* Styles for the input field container */
 .bcds-react-aria-TextArea--container {
   color: var(--typography-color-primary);
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 649e6bd7..557b2015 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -41,6 +41,7 @@ export default function TextArea({
   label,
   description,
   errorMessage,
+  maxLength,
   ...props
 }: TextAreaProps) {
   return (
@@ -67,6 +68,11 @@ export default function TextArea({
               className={`bcds-react-aria-TextArea--Description`}
             >
               {description}
+              {maxLength && (
+                <span className="bcds-react-aria-TextArea--Counter">
+                  Counter/{maxLength}
+                </span>
+              )}
             </Text>
           )}
           <FieldError className="bcds-react-aria-TextArea--Error">

From 4c5a845fa78aeac1a368bae192098294dfe08709 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:29:15 -0700
Subject: [PATCH 11/45] style tweak to fix accessibility vio

---
 packages/react-components/src/components/TextArea/TextArea.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 980bbc09..7bc46543 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -27,7 +27,7 @@
 
 .bcds-react-aria-TextArea--Counter {
   padding-left: var(--layout-padding-medium);
-  color: var(--typography-color-placeholder);
+  color: var(--typography-color-secondary);
 }
 
 /* Styles for the input field container */

From 1c4b2b21c2bc7515b6439e186f30c8537ee171d1 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:34:09 -0700
Subject: [PATCH 12/45] move error state icon out of input field and into error
 message slot

---
 .../react-components/src/components/TextArea/TextArea.css   | 5 +++++
 .../react-components/src/components/TextArea/TextArea.tsx   | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 7bc46543..c9a21589 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -111,3 +111,8 @@
   font: var(--typography-regular-small-body);
   color: var(--typography-color-danger);
 }
+
+.bcds-react-aria-TextAria--iconError {
+  vertical-align: middle;
+  padding-right: var(--layout-padding-xsmall);
+}
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 557b2015..18100f9a 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -46,7 +46,7 @@ export default function TextArea({
 }: TextAreaProps) {
   return (
     <ReactAriaTextField className="bcds-react-aria-TextArea" {...props}>
-      {({ isRequired, isInvalid }) => (
+      {({ isRequired }) => (
         <>
           {label && (
             <Label className="bcds-react-aria-TextArea--Label">
@@ -59,7 +59,6 @@ export default function TextArea({
             </Label>
           )}
           <div className={`bcds-react-aria-TextArea--container`}>
-            {isInvalid && iconError}
             <ReactAriaTextArea className="bcds-react-aria-TextArea--Input" />
           </div>
           {description && (
@@ -76,6 +75,9 @@ export default function TextArea({
             </Text>
           )}
           <FieldError className="bcds-react-aria-TextArea--Error">
+            <span className="bcds-react-aria-TextAria--iconError">
+              {iconError}
+            </span>
             {errorMessage}
           </FieldError>
         </>

From 920f72011e5099ed248dc83090de1bb8b78258f7 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:24:23 -0700
Subject: [PATCH 13/45] fix typo in iconError class name

---
 packages/react-components/src/components/TextArea/TextArea.css | 2 +-
 packages/react-components/src/components/TextArea/TextArea.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index c9a21589..0928ce70 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -112,7 +112,7 @@
   color: var(--typography-color-danger);
 }
 
-.bcds-react-aria-TextAria--iconError {
+.bcds-react-aria-TextArea--iconError {
   vertical-align: middle;
   padding-right: var(--layout-padding-xsmall);
 }
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 18100f9a..5aab8b71 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -75,7 +75,7 @@ export default function TextArea({
             </Text>
           )}
           <FieldError className="bcds-react-aria-TextArea--Error">
-            <span className="bcds-react-aria-TextAria--iconError">
+            <span className="bcds-react-aria-TextArea--iconError">
               {iconError}
             </span>
             {errorMessage}

From 96caaa43cd0b9235bd729f1611db9b0942382b67 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:42:35 -0700
Subject: [PATCH 14/45] add new stories for TextArea

---
 .../src/stories/TextArea.stories.tsx          | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
index bcab28da..5053dba4 100644
--- a/packages/react-components/src/stories/TextArea.stories.tsx
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -63,3 +63,28 @@ export const TextAreaError: Story = {
     errorMessage: "Error message",
   },
 };
+
+export const TextAreaWithMaxLength: Story = {
+  args: {
+    label: "Label",
+    description: "This text area has a maximum length, and displays a counter.",
+    maxLength: 500,
+  },
+};
+
+export const DisabledTextArea: Story = {
+  args: {
+    label: "Label",
+    description: "This text area is disabled",
+    isDisabled: true,
+  },
+};
+
+export const ReadOnlyTextArea: Story = {
+  args: {
+    label: "Label",
+    value: "This text area is set to read-only.",
+    description: "It is focusable, and the value can be copied but not edited.",
+    isReadOnly: true,
+  },
+};

From 7d1b6e4caead3599e4b8498d3799a46cdd10a02e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:58:58 -0700
Subject: [PATCH 15/45] rework structure and styling of description and char
 count

---
 .../src/components/TextArea/TextArea.css      | 30 ++++++++-----
 .../src/components/TextArea/TextArea.tsx      | 42 ++++++++++---------
 .../react-components/src/pages/Form/Form.tsx  |  7 +++-
 3 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 0928ce70..0d9aac74 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -19,19 +19,27 @@
   padding: var(--layout-padding-none) var(--layout-padding-xsmall);
 }
 
-/* Styles for the text description below the input field */
+/* Styles for the description and character count slot below the input field */
 .bcds-react-aria-TextArea--Description {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-secondary);
 }
 
-.bcds-react-aria-TextArea--Counter {
+/* Description label */
+.bcds-react-aria-TextArea--Description .text {
+  position: relative;
+  float: inline-start;
+}
+
+/* Character counter */
+.bcds-react-aria-TextArea--Description .counter {
+  position: relative;
+  float: inline-end;
   padding-left: var(--layout-padding-medium);
-  color: var(--typography-color-secondary);
 }
 
 /* Styles for the input field container */
-.bcds-react-aria-TextArea--container {
+.bcds-react-aria-TextArea--Container {
   color: var(--typography-color-primary);
   display: flex;
   flex-direction: row;
@@ -59,12 +67,12 @@
 
 /* Hover and focus states */
 
-.bcds-react-aria-TextArea--container
+.bcds-react-aria-TextArea--Container
   > .bcds-react-aria-TextArea--Input[data-focused] {
   outline: none;
 }
 
-.bcds-react-aria-TextArea--container:focus-within {
+.bcds-react-aria-TextArea--Container:focus-within {
   border-radius: var(--layout-border-radius-large);
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-active);
@@ -73,14 +81,14 @@
   outline-offset: var(--layout-margin-hair);
 }
 
-.bcds-react-aria-TextArea--container:hover {
+.bcds-react-aria-TextArea--Container:hover {
   border-color: var(--surface-color-border-dark);
 }
 
 /* Disabled and invalid states */
 
 .bcds-react-aria-TextArea[data-disabled]
-  > .bcds-react-aria-TextArea--container {
+  > .bcds-react-aria-TextArea--Container {
   background: var(--surface-color-forms-disabled);
   cursor: not-allowed;
 }
@@ -89,19 +97,19 @@
   cursor: not-allowed;
 }
 
-.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--container {
+.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {
   border-radius: var(--layout-border-radius-medium);
   border: 1px solid var(--support-border-color-danger);
   background: var(--surface-color-forms-default);
 }
 
 .bcds-react-aria-TextArea[data-readonly]
-  > .bcds-react-aria-TextArea--container {
+  > .bcds-react-aria-TextArea--Container {
   background: var(--surface-color-forms-disabled);
 }
 
 .bcds-react-aria-TextArea[data-readonly]
-  > .bcds-react-aria-TextArea--container
+  > .bcds-react-aria-TextArea--Container
   > .bcds-react-aria-TextArea--Input {
   background: var(--surface-color-forms-disabled);
 }
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 5aab8b71..deb50fbb 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -45,37 +45,39 @@ export default function TextArea({
   ...props
 }: TextAreaProps) {
   return (
-    <ReactAriaTextField className="bcds-react-aria-TextArea" {...props}>
+    <ReactAriaTextField className={`bcds-react-aria-TextArea`} {...props}>
       {({ isRequired }) => (
         <>
           {label && (
-            <Label className="bcds-react-aria-TextArea--Label">
+            <Label className={`bcds-react-aria-TextArea--Label`}>
               {label}
               {isRequired && (
-                <span className="bcds-react-aria-TextArea--Label required">
+                <span className={`bcds-react-aria-TextArea--Label required`}>
                   (required)
                 </span>
               )}
             </Label>
           )}
-          <div className={`bcds-react-aria-TextArea--container`}>
-            <ReactAriaTextArea className="bcds-react-aria-TextArea--Input" />
+          <div className={`bcds-react-aria-TextArea--Container`}>
+            <ReactAriaTextArea className={`bcds-react-aria-TextArea--Input`} />
           </div>
-          {description && (
-            <Text
-              slot="description"
-              className={`bcds-react-aria-TextArea--Description`}
-            >
-              {description}
-              {maxLength && (
-                <span className="bcds-react-aria-TextArea--Counter">
-                  Counter/{maxLength}
-                </span>
-              )}
-            </Text>
-          )}
-          <FieldError className="bcds-react-aria-TextArea--Error">
-            <span className="bcds-react-aria-TextArea--iconError">
+          <div className={`bcds-react-aria-TextArea--Description`}>
+            {description && (
+              <Text
+                slot="description"
+                className={`bcds-react-aria-TextArea--Description text`}
+              >
+                {description}
+              </Text>
+            )}
+            {maxLength && (
+              <div className={`bcds-react-aria-TextArea--Description counter`}>
+                Counter/{maxLength}
+              </div>
+            )}
+          </div>
+          <FieldError className={`bcds-react-aria-TextArea--Error`}>
+            <span className={`bcds-react-aria-TextArea--iconError`}>
               {iconError}
             </span>
             {errorMessage}
diff --git a/packages/react-components/src/pages/Form/Form.tsx b/packages/react-components/src/pages/Form/Form.tsx
index 86270dd4..4d183802 100644
--- a/packages/react-components/src/pages/Form/Form.tsx
+++ b/packages/react-components/src/pages/Form/Form.tsx
@@ -49,7 +49,12 @@ export default function FormPage() {
           <TextField type="url" label="Website" name="url" />
         </div>
         <div>
-          <TextArea label="Comments" name="comments" />
+          <TextArea
+            label="Comments"
+            name="comments"
+            maxLength={500}
+            description="Placeholder description"
+          />
         </div>
         <div>
           <TooltipTrigger delay={0} closeDelay={1000}>

From 7862e3ddcd75f1f900f7b646407f6f6bd559b1aa Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 15 Jul 2024 09:18:24 -0700
Subject: [PATCH 16/45] removes an empty div if neither maxLength nor
 description are present

---
 .../src/components/TextArea/TextArea.tsx      | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index deb50fbb..4370f2ea 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -61,21 +61,25 @@ export default function TextArea({
           <div className={`bcds-react-aria-TextArea--Container`}>
             <ReactAriaTextArea className={`bcds-react-aria-TextArea--Input`} />
           </div>
-          <div className={`bcds-react-aria-TextArea--Description`}>
-            {description && (
-              <Text
-                slot="description"
-                className={`bcds-react-aria-TextArea--Description text`}
-              >
-                {description}
-              </Text>
-            )}
-            {maxLength && (
-              <div className={`bcds-react-aria-TextArea--Description counter`}>
-                Counter/{maxLength}
-              </div>
-            )}
-          </div>
+          {description || maxLength ? (
+            <div className={`bcds-react-aria-TextArea--Description`}>
+              {description && (
+                <Text
+                  slot="description"
+                  className={`bcds-react-aria-TextArea--Description text`}
+                >
+                  {description}
+                </Text>
+              )}
+              {maxLength && (
+                <div
+                  className={`bcds-react-aria-TextArea--Description counter`}
+                >
+                  Counter/{maxLength}
+                </div>
+              )}
+            </div>
+          ) : null}
           <FieldError className={`bcds-react-aria-TextArea--Error`}>
             <span className={`bcds-react-aria-TextArea--iconError`}>
               {iconError}

From 340e2e0dd15bd9ab54f2d131ecd7849f255c68a8 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:52:43 -0700
Subject: [PATCH 17/45] new icon implementation to fix typescript error

---
 .../src/assets/icon-error.svg                 | 14 +++++++++++++
 .../src/components/TextArea/TextArea.css      |  4 +++-
 .../src/components/TextArea/TextArea.tsx      | 21 -------------------
 3 files changed, 17 insertions(+), 22 deletions(-)
 create mode 100644 packages/react-components/src/assets/icon-error.svg

diff --git a/packages/react-components/src/assets/icon-error.svg b/packages/react-components/src/assets/icon-error.svg
new file mode 100644
index 00000000..8168d760
--- /dev/null
+++ b/packages/react-components/src/assets/icon-error.svg
@@ -0,0 +1,14 @@
+<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Error icon">
+      <path
+        id="Icon"
+        d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
+        fill="#CE3E39"
+      />
+    </g>
+</svg>
diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 0d9aac74..2409ecd5 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -120,7 +120,9 @@
   color: var(--typography-color-danger);
 }
 
-.bcds-react-aria-TextArea--iconError {
+.bcds-react-aria-TextArea--Error::before {
+  content: url("../src/assets/icon-error.svg");
+  display: inline-block;
   vertical-align: middle;
   padding-right: var(--layout-padding-xsmall);
 }
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 4370f2ea..e8e70258 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -19,24 +19,6 @@ export interface TextAreaProps extends ReactAriaTextFieldProps {
   errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
-/* Icon displayed when input is in invalid state */
-const iconError = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g id="20px/Error icon">
-      <path
-        id="Icon"
-        d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
-        fill="var(--icons-color-danger)"
-      />
-    </g>
-  </svg>
-);
-
 export default function TextArea({
   label,
   description,
@@ -81,9 +63,6 @@ export default function TextArea({
             </div>
           ) : null}
           <FieldError className={`bcds-react-aria-TextArea--Error`}>
-            <span className={`bcds-react-aria-TextArea--iconError`}>
-              {iconError}
-            </span>
             {errorMessage}
           </FieldError>
         </>

From c81318ddfe44132b54db203f47fd95d51c6c05b4 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:34:26 -0700
Subject: [PATCH 18/45] rework positioning logic for description and counter
 slots

---
 .../src/components/TextArea/TextArea.css              | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 2409ecd5..f559733b 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -23,19 +23,20 @@
 .bcds-react-aria-TextArea--Description {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-secondary);
+  display: grid;
+  gap: var(--layout-margin-medium);
 }
 
 /* Description label */
 .bcds-react-aria-TextArea--Description .text {
-  position: relative;
-  float: inline-start;
+  justify-self: flex-start;
+  grid-row: 1;
 }
 
 /* Character counter */
 .bcds-react-aria-TextArea--Description .counter {
-  position: relative;
-  float: inline-end;
-  padding-left: var(--layout-padding-medium);
+  justify-self: flex-end;
+  grid-row: 1;
 }
 
 /* Styles for the input field container */

From b510c5fb25db81e8743366ec1a3aeb1dfdf96b1a Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:41:29 -0700
Subject: [PATCH 19/45] CSS cleanup

---
 .../src/components/TextArea/TextArea.css               | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index f559733b..26ff6658 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -55,19 +55,15 @@
   padding: var(--layout-padding-small) 12px;
 }
 
-.bcds-react-aria-TextArea--Input {
-  border: none;
-  flex-grow: 1;
-}
-
 /* Text input field */
 .bcds-react-aria-TextArea--Input {
   font: var(--typography-regular-body);
   padding: var(--layout-padding-none);
+  border: none;
+  flex-grow: 1;
 }
 
 /* Hover and focus states */
-
 .bcds-react-aria-TextArea--Container
   > .bcds-react-aria-TextArea--Input[data-focused] {
   outline: none;
@@ -87,7 +83,6 @@
 }
 
 /* Disabled and invalid states */
-
 .bcds-react-aria-TextArea[data-disabled]
   > .bcds-react-aria-TextArea--Container {
   background: var(--surface-color-forms-disabled);
@@ -121,6 +116,7 @@
   color: var(--typography-color-danger);
 }
 
+/* Warning icon */
 .bcds-react-aria-TextArea--Error::before {
   content: url("../src/assets/icon-error.svg");
   display: inline-block;

From b7631293dc22529ce9807f54d56f54a0182d936e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:57:49 -0700
Subject: [PATCH 20/45] Revert "add demo form to vite app"

This reverts commit 30b1a3e0fe062f888267d5382bb7c966acb2aa07.
---
 packages/react-components/src/App.tsx         |  2 -
 .../react-components/src/pages/Form/Form.tsx  | 73 -------------------
 .../react-components/src/pages/Form/index.ts  |  3 -
 packages/react-components/src/pages/index.ts  |  2 -
 4 files changed, 80 deletions(-)
 delete mode 100644 packages/react-components/src/pages/Form/Form.tsx
 delete mode 100644 packages/react-components/src/pages/Form/index.ts

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index 1495c1af..fee9bd76 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -8,7 +8,6 @@ import { Button, Footer, FooterLinks, Header } from "@/components";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import {
   ButtonPage,
-  FormPage,
   SelectPage,
   TagGroupPage,
   TooltipPage,
@@ -152,7 +151,6 @@ function App() {
         <TooltipPage />
         <TextFieldPage />
         <TextAreaPage />
-        <FormPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/pages/Form/Form.tsx b/packages/react-components/src/pages/Form/Form.tsx
deleted file mode 100644
index 4d183802..00000000
--- a/packages/react-components/src/pages/Form/Form.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
-  Button,
-  Select,
-  TextArea,
-  TextField,
-  Tooltip,
-  TooltipTrigger,
-} from "@/components";
-
-import { Form } from "react-aria-components";
-
-export default function FormPage() {
-  return (
-    <>
-      <Form id="bcds-form">
-        <h2>Composed form</h2>
-        <div>
-          <TextField isRequired label="Name" name="name" />
-        </div>
-        <div>
-          <TextField
-            isRequired
-            type="email"
-            name="email"
-            label="Email address"
-          />
-        </div>
-        <div>
-          <Select
-            items={[
-              {
-                id: "1",
-                label: "Victoria",
-              },
-              {
-                id: "2",
-                label: "Vancouver",
-              },
-              {
-                id: "3",
-                label: "Kelowna",
-              },
-            ]}
-            label="City"
-            name="city"
-          />
-        </div>
-        <div>
-          <TextField type="url" label="Website" name="url" />
-        </div>
-        <div>
-          <TextArea
-            label="Comments"
-            name="comments"
-            maxLength={500}
-            description="Placeholder description"
-          />
-        </div>
-        <div>
-          <TooltipTrigger delay={0} closeDelay={1000}>
-            <Button variant="primary" size="small" type="submit">
-              Submit
-            </Button>
-            <Tooltip placement="right">
-              This is a dummy button, that will show validation errors but
-              doesn't submit any data
-            </Tooltip>
-          </TooltipTrigger>
-        </div>
-      </Form>
-    </>
-  );
-}
diff --git a/packages/react-components/src/pages/Form/index.ts b/packages/react-components/src/pages/Form/index.ts
deleted file mode 100644
index aee0bd85..00000000
--- a/packages/react-components/src/pages/Form/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import FormPage from "./Form";
-
-export default FormPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index 41dea9b3..545d432c 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -1,5 +1,4 @@
 import ButtonPage from "./Button";
-import FormPage from "./Form";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
 import TextFieldPage from "./TextField";
@@ -8,7 +7,6 @@ import TooltipPage from "./Tooltip";
 
 export {
   ButtonPage,
-  FormPage,
   SelectPage,
   TagGroupPage,
   TextFieldPage,

From 8ef5d58f036b97c1bdbdf40e44850c46d630c2c8 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:58:09 -0700
Subject: [PATCH 21/45] Revert "group textfield and textarea together in
 storybook"

This reverts commit 2152c2633f3bf56ac1a246dc7107d5571dd7a772.
---
 packages/react-components/src/stories/TextArea.stories.tsx  | 2 +-
 packages/react-components/src/stories/TextField.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
index 5053dba4..42a33222 100644
--- a/packages/react-components/src/stories/TextArea.stories.tsx
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextArea } from "../components";
 
 const meta = {
-  title: "Components/Text Input/TextArea",
+  title: "Components/TextArea",
   component: TextArea,
   parameters: {
     layout: "centered",
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index f61f0dc8..fa9bb380 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextField } from "../components";
 
 const meta = {
-  title: "Components/Text Input/TextField",
+  title: "Components/TextField/TextField",
   component: TextField,
   parameters: {
     layout: "centered",

From b6c025f26a6781791f77c35df492afebc29a246f Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:10:11 -0700
Subject: [PATCH 22/45] Revert "TextField component"

This reverts commit 7f43af04ab6658fe97e2eacaeb49a7e0be23222b.
---
 packages/react-components/src/App.tsx         |   2 -
 .../src/components/TextField/TextField.css    | 122 -----------
 .../src/components/TextField/TextField.tsx    |  90 ---------
 .../src/components/TextField/index.ts         |   2 -
 .../react-components/src/components/index.ts  |   1 -
 .../src/pages/TextField/TextField.tsx         |  10 -
 .../src/pages/TextField/index.ts              |   3 -
 packages/react-components/src/pages/index.ts  |  10 +-
 .../src/stories/TextField.mdx                 |  94 ---------
 .../src/stories/TextField.stories.tsx         | 190 ------------------
 10 files changed, 1 insertion(+), 523 deletions(-)
 delete mode 100644 packages/react-components/src/components/TextField/TextField.css
 delete mode 100644 packages/react-components/src/components/TextField/TextField.tsx
 delete mode 100644 packages/react-components/src/components/TextField/index.ts
 delete mode 100644 packages/react-components/src/pages/TextField/TextField.tsx
 delete mode 100644 packages/react-components/src/pages/TextField/index.ts
 delete mode 100644 packages/react-components/src/stories/TextField.mdx
 delete mode 100644 packages/react-components/src/stories/TextField.stories.tsx

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index fee9bd76..6ca8959c 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -11,7 +11,6 @@ import {
   SelectPage,
   TagGroupPage,
   TooltipPage,
-  TextFieldPage,
   TextAreaPage,
 } from "@/pages";
 
@@ -149,7 +148,6 @@ function App() {
         <SelectPage />
         <TagGroupPage />
         <TooltipPage />
-        <TextFieldPage />
         <TextAreaPage />
       </main>
       <Footer />
diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
deleted file mode 100644
index 73e09b3e..00000000
--- a/packages/react-components/src/components/TextField/TextField.css
+++ /dev/null
@@ -1,122 +0,0 @@
-.bcds-react-aria-TextField {
-  display: inline-flex;
-  flex-direction: column;
-  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
-  align-self: stretch;
-  max-width: -moz-available;
-  max-width: -webkit-fill-available;
-}
-
-/* Styles for the text label above the input field */
-.bcds-react-aria-TextField--Label {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-primary);
-  padding: var(--layout-margin-hair) 0px;
-}
-
-.bcds-react-aria-TextField--Label .required {
-  color: var(--typography-color-secondary);
-  padding: var(--layout-padding-none) var(--layout-padding-xsmall);
-}
-
-/* Styles for the text description below the input field */
-.bcds-react-aria-TextField--Description {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-secondary);
-}
-
-/* Styles for the input field container */
-.bcds-react-aria-TextField--container {
-  color: var(--typography-color-primary);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--layout-margin-small);
-  background: var(--surface-color-forms-default);
-  box-sizing: border-box;
-  border: var(--layout-border-width-small) solid
-    var(--surface-color-border-default);
-  border-radius: var(--layout-border-radius-medium);
-  margin: var(--layout-margin-small) var(--layout-margin-none);
-  padding: var(--layout-padding-small) 12px;
-}
-
-.bcds-react-aria-TextField--Input {
-  border: none;
-  flex-grow: 1;
-}
-
-/* Sizes */
-.bcds-react-aria-TextField--container.small {
-  /* using margin token is kludgy, consider adding component-specific token for input sizing */
-  height: var(--layout-margin-xlarge);
-  min-height: var(--layout-margin-xlarge);
-}
-
-.bcds-react-aria-TextField--container.medium {
-  /* using margin token is kludgy, consider adding component-specific token for input sizing */
-  height: var(--layout-margin-xxlarge);
-  min-height: var(--layout-margin-xxlarge);
-}
-
-/* Text input field */
-.bcds-react-aria-TextField--Input {
-  font: var(--typography-regular-body);
-  padding: var(--layout-padding-none);
-}
-
-/* Hover and focus states */
-
-.bcds-react-aria-TextField--container
-  > .bcds-react-aria-TextField--Input[data-focused] {
-  outline: none;
-}
-
-.bcds-react-aria-TextField--container:focus-within {
-  border-radius: var(--layout-border-radius-large);
-  border: var(--layout-border-width-small) solid
-    var(--surface-color-border-active);
-  outline: solid var(--layout-border-width-medium)
-    var(--surface-color-border-active);
-  outline-offset: var(--layout-margin-hair);
-}
-
-.bcds-react-aria-TextField--container:hover {
-  border-color: var(--surface-color-border-dark);
-}
-
-/* Disabled and invalid states */
-
-.bcds-react-aria-TextField[data-disabled]
-  > .bcds-react-aria-TextField--container {
-  background: var(--surface-color-forms-disabled);
-  cursor: not-allowed;
-}
-
-.bcds-react-aria-TextField--Input[data-disabled] {
-  cursor: not-allowed;
-}
-
-.bcds-react-aria-TextField[data-invalid]
-  > .bcds-react-aria-TextField--container {
-  border-radius: var(--layout-border-radius-medium);
-  border: 1px solid var(--support-border-color-danger);
-  background: var(--surface-color-forms-default);
-}
-
-.bcds-react-aria-TextField[data-readonly]
-  > .bcds-react-aria-TextField--container {
-  background: var(--surface-color-forms-disabled);
-}
-
-.bcds-react-aria-TextField[data-readonly]
-  > .bcds-react-aria-TextField--container
-  > .bcds-react-aria-TextField--Input {
-  background: var(--surface-color-forms-disabled);
-}
-
-/* Styles for the error message slot */
-.bcds-react-aria-TextField--Error {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-danger);
-}
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
deleted file mode 100644
index f10edf5a..00000000
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-  TextField as ReactAriaTextField,
-  TextFieldProps as ReactAriaTextFieldProps,
-  Input,
-  Label,
-  FieldError,
-  Text,
-  ValidationResult,
-} from "react-aria-components";
-
-import "./TextField.css";
-
-export interface TextFieldProps extends ReactAriaTextFieldProps {
-  /* Sets size of text input field */
-  size?: "medium" | "small";
-  /* Sets text label above text input field */
-  label?: string;
-  /* Sets optional description text below text input field */
-  description?: string;
-  /* Used for data validation and error handling */
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  /* Icon slot to left of text input field */
-  iconLeft?: React.ReactElement;
-  /* Icon slot to right of text input field */
-  iconRight?: React.ReactElement;
-}
-
-/* Icon displayed when input is in invalid state */
-const iconError = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g id="20px/Error icon">
-      <path
-        id="Icon"
-        d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
-        fill="var(--icons-color-danger)"
-      />
-    </g>
-  </svg>
-);
-
-export default function TextField({
-  size = "medium",
-  label,
-  description,
-  errorMessage,
-  iconLeft,
-  iconRight,
-  ...props
-}: TextFieldProps) {
-  return (
-    <ReactAriaTextField className="bcds-react-aria-TextField" {...props}>
-      {({ isRequired, isInvalid }) => (
-        <>
-          {label && (
-            <Label className="bcds-react-aria-TextField--Label">
-              {label}
-              {isRequired && (
-                <span className="bcds-react-aria-TextField--Label required">
-                  (required)
-                </span>
-              )}
-            </Label>
-          )}
-          <div className={`bcds-react-aria-TextField--container ${size}`}>
-            {iconLeft}
-            <Input className="bcds-react-aria-TextField--Input" />
-            {isInvalid && iconError}
-            {iconRight}
-          </div>
-          {description && (
-            <Text
-              slot="description"
-              className={`bcds-react-aria-TextField--Description`}
-            >
-              {description}
-            </Text>
-          )}
-          <FieldError className="bcds-react-aria-TextField--Error">
-            {errorMessage}
-          </FieldError>
-        </>
-      )}
-    </ReactAriaTextField>
-  );
-}
diff --git a/packages/react-components/src/components/TextField/index.ts b/packages/react-components/src/components/TextField/index.ts
deleted file mode 100644
index 3e6d8643..00000000
--- a/packages/react-components/src/components/TextField/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./TextField";
-export type { TextFieldProps } from "./TextField";
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
index aa8edde7..c1321e1b 100644
--- a/packages/react-components/src/components/index.ts
+++ b/packages/react-components/src/components/index.ts
@@ -8,6 +8,5 @@ export { default as SvgBcLogo } from "./SvgBcLogo";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
-export { default as TextField } from "./TextField";
 export { default as TextArea } from "./TextArea";
 export { default as Tooltip, TooltipTrigger } from "./Tooltip";
diff --git a/packages/react-components/src/pages/TextField/TextField.tsx b/packages/react-components/src/pages/TextField/TextField.tsx
deleted file mode 100644
index 0e4d3937..00000000
--- a/packages/react-components/src/pages/TextField/TextField.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { TextField } from "@/components";
-
-export default function TextFieldPage() {
-  return (
-    <>
-      <h2>TextField</h2>
-      <TextField />
-    </>
-  );
-}
diff --git a/packages/react-components/src/pages/TextField/index.ts b/packages/react-components/src/pages/TextField/index.ts
deleted file mode 100644
index 61f22677..00000000
--- a/packages/react-components/src/pages/TextField/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import TextFieldPage from "./TextField";
-
-export default TextFieldPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index 545d432c..52d0b130 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -1,15 +1,7 @@
 import ButtonPage from "./Button";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
-import TextFieldPage from "./TextField";
 import TextAreaPage from "./TextArea";
 import TooltipPage from "./Tooltip";
 
-export {
-  ButtonPage,
-  SelectPage,
-  TagGroupPage,
-  TextFieldPage,
-  TextAreaPage,
-  TooltipPage,
-};
+export { ButtonPage, SelectPage, TagGroupPage, TextAreaPage, TooltipPage };
diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
deleted file mode 100644
index 8cab1993..00000000
--- a/packages/react-components/src/stories/TextField.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
-{/* TextField.mdx */}
-
-import {
-  Canvas,
-  Controls,
-  Meta,
-  Primary,
-  Source,
-  Story,
-  Subtitle,
-} from "@storybook/blocks";
-
-import * as TextFieldStories from "./TextField.stories";
-
-<Meta of={TextFieldStories} />
-
-# Text Field
-
-<Subtitle>
-  The text field component enables a user to enter text into an interface or
-  form.
-</Subtitle>
-
-<Source
-  code={`import { TextField } from "@bcgov/design-system-react-components"; `}
-  language="typescript"
-/>
-
-## Usage and resources
-
-Learn more about working with the text field component:
-
-- [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content/digital/design-system/components/text-field)
-- [View the text field component in Figma](#)
-
-This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html). Consult the React Aria documentation for additional technical information and a full list of supported props.
-
-### Validation
-
-Default and custom data validation support is built in, using the [React Aria FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/forms.html#validation).
-
-## Controls
-
-<Primary of={TextFieldStories} />
-<Controls of={TextFieldStories.TextFieldTemplate} />
-
-## Configuration
-
-### Size
-
-The `size` prop enables you to choose between medium (default) and small (reduced height) versions:
-
-<Canvas of={TextFieldStories.MediumTextField} />
-<Canvas of={TextFieldStories.SmallTextField} />
-
-### Required
-
-By default, input fields are marked as optional. Use the `isRequired` prop to mark an input as required, and display a text label:
-
-<Canvas of={TextFieldStories.RequiredTextField} />
-
-### Icons
-
-You can display icons in a text field by passing an image to either or both of the `iconLeft` and `iconRight` slots:
-
-<Canvas of={TextFieldStories.TextFieldWithIcons} />
-
-Icons can be used to provide an additional visual indicator of a text field's function, like a search field:
-
-<Canvas of={TextFieldStories.SearchField} />
-
-### Input types
-
-Use the `type` prop to define the type of input a text field expects. If no `type` prop is provided, the attribute defaults to `text`.
-
-For example, setting the type to `password` automatically obscures input:
-
-<Canvas of={TextFieldStories.PasswordField} />
-
-Types like `url`, `tel` or `email` are used for data validation. Consult the MDN documentation for [a full list of valid input type attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
-
-### States
-
-Use `isDisabled` to disable a text field. A disabled field cannot be focused or interacted with:
-
-<Canvas of={TextFieldStories.DisabledTextField} />
-
-Use `isReadOnly` to lock a field to its current value. A read-only input can be focused and copied, but cannot be edited:
-
-<Canvas of={TextFieldStories.ReadOnlyTextField} />
-
-The `isInvalid` prop should be set programmatically when an input is invalid. It renders an error icon in the input field, changes the border colour and displays an `errorMessage` (using the [FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/TextField.html#validation)):
-
-<Canvas of={TextFieldStories.TextFieldError} />
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
deleted file mode 100644
index fa9bb380..00000000
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { TextField } from "../components";
-
-const meta = {
-  title: "Components/TextField/TextField",
-  component: TextField,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    size: {
-      options: ["medium", "small"],
-      control: { type: "radio" },
-      description: "Defaults to 'medium', also supports 'small'",
-    },
-    type: {
-      options: ["text", "search", "email", "url", "tel", "password"],
-      control: { type: "radio" },
-    },
-    value: {
-      control: { type: "text" },
-      description: "Input value",
-    },
-    label: {
-      control: { type: "text" },
-      description: "Text that appears above the input field",
-    },
-    isRequired: {
-      control: "boolean",
-      description: "Is this input required?",
-    },
-    isDisabled: {
-      control: "boolean",
-      description: "Is the input disabled?",
-    },
-    isInvalid: {
-      control: "boolean",
-      description: "Is the user's input valid?",
-    },
-    isReadOnly: {
-      control: "boolean",
-      description: "Locks the field to its current value",
-    },
-    minLength: {
-      control: "number",
-      description: "Minimum character length for this input",
-    },
-    maxLength: {
-      control: "number",
-      description: "Maximum character length for this input",
-    },
-  },
-} satisfies Meta<typeof TextField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TextFieldTemplate: Story = {
-  args: {
-    label: "Label",
-    size: "medium",
-    type: "text",
-    description: "Optional description or helper text",
-  },
-};
-
-export const MediumTextField: Story = {
-  args: {
-    ...TextFieldTemplate.args,
-    description: "This is the default/medium size variant of the input field",
-  },
-};
-
-export const SmallTextField: Story = {
-  args: {
-    ...TextFieldTemplate.args,
-    size: "small",
-    description: "The small size variant has reduced height",
-  },
-};
-
-export const RequiredTextField: Story = {
-  args: {
-    ...TextFieldTemplate.args,
-    isRequired: true,
-  },
-};
-
-const iconPlaceholder = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g id="20px/Icon placeholder" clip-path="url(#clip0_717_6325)">
-      <path
-        id="Icon"
-        d="M9.99996 18.3333C14.6023 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6023 1.66663 9.99996 1.66663C5.39759 1.66663 1.66663 5.39759 1.66663 9.99996C1.66663 14.6023 5.39759 18.3333 9.99996 18.3333Z"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_717_6325">
-        <rect width="20" height="20" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-const iconSearch = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="15"
-    height="15"
-    viewBox="0 0 15 15"
-    fill="none"
-  >
-    <path
-      d="M14.4479 13.2956C14.7213 13.569 14.7213 13.9792 14.4479 14.2253C14.3385 14.362 14.1745 14.4167 14.0104 14.4167C13.819 14.4167 13.6549 14.362 13.5182 14.2253L9.85416 10.5612C8.86978 11.3542 7.63931 11.7917 6.32681 11.7917C3.20963 11.7917 0.666656 9.24869 0.666656 6.10416C0.666656 2.98697 3.18228 0.416656 6.32681 0.416656C9.444 0.416656 12.0143 2.98697 12.0143 6.10416C12.0143 7.444 11.5768 8.67447 10.7838 9.6315L14.4479 13.2956ZM1.97916 6.10416C1.97916 8.53775 3.92056 10.4792 6.35416 10.4792C8.76041 10.4792 10.7292 8.53775 10.7292 6.10416C10.7292 3.69791 8.76041 1.72916 6.35416 1.72916C3.92056 1.72916 1.97916 3.69791 1.97916 6.10416Z"
-      fill="#2D2D2D"
-    />
-  </svg>
-);
-
-export const TextFieldWithIcons: Story = {
-  args: {
-    ...TextFieldTemplate.args,
-    iconLeft: iconPlaceholder,
-    iconRight: iconPlaceholder,
-    description: "You can use either, both or neither icon slot as needed",
-  },
-};
-
-export const SearchField: Story = {
-  args: {
-    label: "Search",
-    size: "medium",
-    type: "search",
-    iconLeft: iconSearch,
-    description: "Icon slots can be used to provide additional visual context",
-  },
-};
-
-export const PasswordField: Story = {
-  args: {
-    label: "Password",
-    size: "medium",
-    type: "password",
-    value: "password",
-    description: "Input is automatically obscured",
-  },
-};
-
-export const DisabledTextField: Story = {
-  args: {
-    ...TextFieldTemplate.args,
-    description: "This field is disabled and cannot be interacted with",
-    isDisabled: true,
-  },
-};
-
-export const ReadOnlyTextField: Story = {
-  args: {
-    label: "Label",
-    size: "medium",
-    type: "text",
-    value: "This field is locked",
-    description: "Input can be selected and copied but not edited",
-    isReadOnly: true,
-  },
-};
-
-export const TextFieldError: Story = {
-  args: {
-    ...TextFieldTemplate.args,
-    label: "This is a URL field",
-    type: "url",
-    value: "This value is invalid",
-    description:
-      "This component supports custom, real-time and server-side data validation",
-    isInvalid: true,
-    errorMessage: "Error messages can be customised or passed programmatically",
-  },
-};

From 0b8bc37b0f6f5d972e9a64ba5683d6e474657786 Mon Sep 17 00:00:00 2001
From: Tyler Krys <Tyler.Krys@gov.bc.ca>
Date: Tue, 16 Jul 2024 14:50:30 -0700
Subject: [PATCH 23/45] Add work in progress TextArea maxLength counter idea

---
 .../src/components/TextArea/TextArea.tsx      | 18 +++++++++++--
 .../src/pages/TextArea/TextArea.tsx           | 25 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index e8e70258..9778184c 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   TextField as ReactAriaTextField,
   TextFieldProps as ReactAriaTextFieldProps,
@@ -24,8 +25,17 @@ export default function TextArea({
   description,
   errorMessage,
   maxLength,
+  onChange,
+  value,
   ...props
 }: TextAreaProps) {
+  const [charCount, setCharCount] = useState(value ? value.length : 0);
+
+  function handleChange(text: string) {
+    if (onChange) onChange(text);
+    setCharCount(text.length);
+  }
+
   return (
     <ReactAriaTextField className={`bcds-react-aria-TextArea`} {...props}>
       {({ isRequired }) => (
@@ -41,7 +51,11 @@ export default function TextArea({
             </Label>
           )}
           <div className={`bcds-react-aria-TextArea--Container`}>
-            <ReactAriaTextArea className={`bcds-react-aria-TextArea--Input`} />
+            <ReactAriaTextArea
+              className={`bcds-react-aria-TextArea--Input`}
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+            />
           </div>
           {description || maxLength ? (
             <div className={`bcds-react-aria-TextArea--Description`}>
@@ -57,7 +71,7 @@ export default function TextArea({
                 <div
                   className={`bcds-react-aria-TextArea--Description counter`}
                 >
-                  Counter/{maxLength}
+                  {charCount}/{maxLength}
                 </div>
               )}
             </div>
diff --git a/packages/react-components/src/pages/TextArea/TextArea.tsx b/packages/react-components/src/pages/TextArea/TextArea.tsx
index b5fd5f96..e0845d1d 100644
--- a/packages/react-components/src/pages/TextArea/TextArea.tsx
+++ b/packages/react-components/src/pages/TextArea/TextArea.tsx
@@ -1,10 +1,33 @@
+import { useState } from "react";
+
 import { TextArea } from "@/components";
 
 export default function TextAreaPage() {
+  const [text, setText] = useState("initial text state");
+
+  function handleTextChange(text: string) {
+    console.log("new text value: ", text);
+
+    setText(text);
+  }
+
   return (
     <>
       <h2>TextArea</h2>
-      <TextArea />
+      <div>
+        <p>
+          <code>text</code>: {text}{" "}
+        </p>
+        <TextArea
+          label={"Controlled"}
+          value={text}
+          onChange={handleTextChange}
+          maxLength={500}
+        />
+      </div>
+      <div>
+        <TextArea label={"Uncontrolled"} maxLength={500} defaultValue="Hello" />
+      </div>
     </>
   );
 }

From bbcba9eb50718a4537beb4b7174e74554fcb2740 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 09:46:40 -0700
Subject: [PATCH 24/45] add comment to new charCount function

---
 packages/react-components/src/components/TextArea/TextArea.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 9778184c..e16eb1cc 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -29,6 +29,7 @@ export default function TextArea({
   value,
   ...props
 }: TextAreaProps) {
+  // handler for character counter, displayed when a maxLength is set
   const [charCount, setCharCount] = useState(value ? value.length : 0);
 
   function handleChange(text: string) {

From 7ae8882cec3fa6ca88a2ecfe6b5c4c1496a8ee83 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 11:31:42 -0700
Subject: [PATCH 25/45] add missing colour styles and docs note on placeholder
 text

---
 .../react-components/src/components/TextArea/TextArea.css | 5 +++++
 packages/react-components/src/stories/TextArea.mdx        | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 26ff6658..1cc83fd3 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -59,10 +59,15 @@
 .bcds-react-aria-TextArea--Input {
   font: var(--typography-regular-body);
   padding: var(--layout-padding-none);
+  color: var(--typography-color-primary);
   border: none;
   flex-grow: 1;
 }
 
+.bcds-rect-aria-TextArea--Input::placeholder {
+  color: var(--typography-color-placeholder);
+}
+
 /* Hover and focus states */
 .bcds-react-aria-TextArea--Container
   > .bcds-react-aria-TextArea--Input[data-focused] {
diff --git a/packages/react-components/src/stories/TextArea.mdx b/packages/react-components/src/stories/TextArea.mdx
index 3ae7201e..33719bf4 100644
--- a/packages/react-components/src/stories/TextArea.mdx
+++ b/packages/react-components/src/stories/TextArea.mdx
@@ -34,6 +34,14 @@ Learn more about working with the text area component:
 
 This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html#multi-line).
 
+### Validation
+
+Default and custom data validation support is built in, using the [React Aria FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/forms.html#validation).
+
+### Placeholder
+
+As a general rule, the `placeholder` attribute should not be used on text fields. While `placeholder` is technically supported, the use of 'ghost text' has [serious accessibility and usability issues](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#accessibility_concerns).
+
 ## Controls
 
 <Primary of={TextAreaStories} />

From 4e165df0c79234f1c9911244393716e9635278e8 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 11:41:08 -0700
Subject: [PATCH 26/45] expand storybook docs

---
 .../react-components/src/stories/TextArea.mdx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/react-components/src/stories/TextArea.mdx b/packages/react-components/src/stories/TextArea.mdx
index 33719bf4..db1d859c 100644
--- a/packages/react-components/src/stories/TextArea.mdx
+++ b/packages/react-components/src/stories/TextArea.mdx
@@ -48,3 +48,23 @@ As a general rule, the `placeholder` attribute should not be used on text fields
 <Controls of={TextAreaStories.TextAreaTemplate} />
 
 ## Configuration
+
+### Maximum length
+
+The `maxLength` prop can be used to limit the amount of text a user can input. When `maxLength` is passed, a character counter renders below the input field:
+
+<Canvas of={TextAreaStories.TextAreaWithMaxLength} />
+
+### States
+
+Use `isDisabled` to disable a text area. A disabled text area cannot be focused or interacted with:
+
+<Canvas of={TextAreaStories.DisabledTextArea} />
+
+Use `isReadOnly` to lock a text area to its current value. A read-only text area can be focused and copied, but cannot be edited:
+
+<Canvas of={TextAreaStories.ReadOnlyTextArea} />
+
+The `isInvalid` prop should be set programmatically when an input is invalid. It renders an error icon in the input field, changes the border colour and displays an `errorMessage` (using the FieldError subcomponent):
+
+<Canvas of={TextAreaStories.TextAreaError} />

From 2a588547eb86e64a5c0213ec01c57d551c53cf03 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 13:36:50 -0700
Subject: [PATCH 27/45] reorder stories and add isRequired case

---
 packages/react-components/src/stories/TextArea.mdx |  4 ++++
 .../src/stories/TextArea.stories.tsx               | 14 +++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/stories/TextArea.mdx b/packages/react-components/src/stories/TextArea.mdx
index db1d859c..deb47c7a 100644
--- a/packages/react-components/src/stories/TextArea.mdx
+++ b/packages/react-components/src/stories/TextArea.mdx
@@ -57,6 +57,10 @@ The `maxLength` prop can be used to limit the amount of text a user can input. W
 
 ### States
 
+Use `isRequired` to make a text area mandatory. A secondary label is shown above the input field:
+
+<Canvas of={TextAreaStories.RequiredTextArea} />
+
 Use `isDisabled` to disable a text area. A disabled text area cannot be focused or interacted with:
 
 <Canvas of={TextAreaStories.DisabledTextArea} />
diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
index 42a33222..c34700ae 100644
--- a/packages/react-components/src/stories/TextArea.stories.tsx
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -54,13 +54,11 @@ export const TextAreaTemplate: Story = {
   },
 };
 
-export const TextAreaError: Story = {
+export const RequiredTextArea: Story = {
   args: {
     label: "Label",
     description: "Optional description or helper text",
     isRequired: true,
-    isInvalid: true,
-    errorMessage: "Error message",
   },
 };
 
@@ -88,3 +86,13 @@ export const ReadOnlyTextArea: Story = {
     isReadOnly: true,
   },
 };
+
+export const TextAreaError: Story = {
+  args: {
+    label: "Label",
+    description: "Optional description or helper text",
+    isRequired: true,
+    isInvalid: true,
+    errorMessage: "Error message",
+  },
+};

From 4f91ae2efd8ce5973304bcd631b84b5059e6718d Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 14:29:39 -0700
Subject: [PATCH 28/45] syntax cleanup

---
 .../src/components/TextArea/TextArea.tsx       | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index e16eb1cc..7705ae54 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -42,42 +42,40 @@ export default function TextArea({
       {({ isRequired }) => (
         <>
           {label && (
-            <Label className={`bcds-react-aria-TextArea--Label`}>
+            <Label className="bcds-react-aria-TextArea--Label">
               {label}
               {isRequired && (
-                <span className={`bcds-react-aria-TextArea--Label required`}>
+                <span className="bcds-react-aria-TextArea--Label required">
                   (required)
                 </span>
               )}
             </Label>
           )}
-          <div className={`bcds-react-aria-TextArea--Container`}>
+          <div className="bcds-react-aria-TextArea--Container">
             <ReactAriaTextArea
-              className={`bcds-react-aria-TextArea--Input`}
+              className="bcds-react-aria-TextArea--Input"
               value={value}
               onChange={(e) => handleChange(e.target.value)}
             />
           </div>
           {description || maxLength ? (
-            <div className={`bcds-react-aria-TextArea--Description`}>
+            <div className="bcds-react-aria-TextArea--Description">
               {description && (
                 <Text
                   slot="description"
-                  className={`bcds-react-aria-TextArea--Description text`}
+                  className="bcds-react-aria-TextArea--Description text"
                 >
                   {description}
                 </Text>
               )}
               {maxLength && (
-                <div
-                  className={`bcds-react-aria-TextArea--Description counter`}
-                >
+                <div className="bcds-react-aria-TextArea--Description counter">
                   {charCount}/{maxLength}
                 </div>
               )}
             </div>
           ) : null}
-          <FieldError className={`bcds-react-aria-TextArea--Error`}>
+          <FieldError className="bcds-react-aria-TextArea--Error">
             {errorMessage}
           </FieldError>
         </>

From 1423f3e45ce2f59b8cab83461543acc4d739e493 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 18 Jul 2024 16:38:32 -0700
Subject: [PATCH 29/45] add warning icon as a react component

---
 .../{icon-error.svg => icon-warning.svg}      |  2 +-
 .../SvgWarningIcon/SvgWarningIcon.tsx         | 23 +++++++++++++++++++
 .../src/components/SvgWarningIcon/index.ts    |  1 +
 3 files changed, 25 insertions(+), 1 deletion(-)
 rename packages/react-components/src/assets/{icon-error.svg => icon-warning.svg} (96%)
 create mode 100644 packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx
 create mode 100644 packages/react-components/src/components/SvgWarningIcon/index.ts

diff --git a/packages/react-components/src/assets/icon-error.svg b/packages/react-components/src/assets/icon-warning.svg
similarity index 96%
rename from packages/react-components/src/assets/icon-error.svg
rename to packages/react-components/src/assets/icon-warning.svg
index 8168d760..54c0ea6d 100644
--- a/packages/react-components/src/assets/icon-error.svg
+++ b/packages/react-components/src/assets/icon-warning.svg
@@ -4,7 +4,7 @@
     viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g id="20px/Error icon">
+    <g id="20px/Warning icon">
       <path
         id="Icon"
         d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
diff --git a/packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx b/packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx
new file mode 100644
index 00000000..ab0c1cdd
--- /dev/null
+++ b/packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx
@@ -0,0 +1,23 @@
+// This logo is available as a plain SVG at src/assets/icon-warning.svg
+export default function SvgWarningIcon({
+  id = "Warning icon",
+  currentColor = "#CE3E39",
+}) {
+  return (
+    <svg
+      id={id}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="20px/Error icon">
+        <path
+          id="Icon"
+          d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
+          fill={currentColor}
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/react-components/src/components/SvgWarningIcon/index.ts b/packages/react-components/src/components/SvgWarningIcon/index.ts
new file mode 100644
index 00000000..7dfc2969
--- /dev/null
+++ b/packages/react-components/src/components/SvgWarningIcon/index.ts
@@ -0,0 +1 @@
+export { default } from "./SvgWarningIcon";

From 95c8ac3d7cfed18eb8e58cf5970051d16dec9434 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 18 Jul 2024 16:41:06 -0700
Subject: [PATCH 30/45] changes to warning icon SVG

---
 packages/react-components/src/assets/icon-warning.svg | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/assets/icon-warning.svg b/packages/react-components/src/assets/icon-warning.svg
index 54c0ea6d..5f4b9490 100644
--- a/packages/react-components/src/assets/icon-warning.svg
+++ b/packages/react-components/src/assets/icon-warning.svg
@@ -3,12 +3,14 @@
     height="20"
     viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
+    id="20px/Warning icon"
+    currentColor="#CE3E39"
   >
-    <g id="20px/Warning icon">
+    <g>
       <path
         id="Icon"
         d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
-        fill="#CE3E39"
+        fill={currentColor}
       />
     </g>
 </svg>

From 05f9a253f237077bafb53b99cd6460a049f2c273 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 18 Jul 2024 16:42:59 -0700
Subject: [PATCH 31/45] change icon to SvgExclamationIcon

---
 .../src/assets/{icon-warning.svg => icon-exclamation.svg}   | 2 +-
 .../SvgExclamationIcon.tsx}                                 | 6 +++---
 .../src/components/SvgExclamationIcon/index.ts              | 1 +
 .../react-components/src/components/SvgWarningIcon/index.ts | 1 -
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/react-components/src/assets/{icon-warning.svg => icon-exclamation.svg} (96%)
 rename packages/react-components/src/components/{SvgWarningIcon/SvgWarningIcon.tsx => SvgExclamationIcon/SvgExclamationIcon.tsx} (90%)
 create mode 100644 packages/react-components/src/components/SvgExclamationIcon/index.ts
 delete mode 100644 packages/react-components/src/components/SvgWarningIcon/index.ts

diff --git a/packages/react-components/src/assets/icon-warning.svg b/packages/react-components/src/assets/icon-exclamation.svg
similarity index 96%
rename from packages/react-components/src/assets/icon-warning.svg
rename to packages/react-components/src/assets/icon-exclamation.svg
index 5f4b9490..51f2f423 100644
--- a/packages/react-components/src/assets/icon-warning.svg
+++ b/packages/react-components/src/assets/icon-exclamation.svg
@@ -3,7 +3,7 @@
     height="20"
     viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
-    id="20px/Warning icon"
+    id="20px/Exclamation icon"
     currentColor="#CE3E39"
   >
     <g>
diff --git a/packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
similarity index 90%
rename from packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx
rename to packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
index ab0c1cdd..5c700053 100644
--- a/packages/react-components/src/components/SvgWarningIcon/SvgWarningIcon.tsx
+++ b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
@@ -1,6 +1,6 @@
 // This logo is available as a plain SVG at src/assets/icon-warning.svg
-export default function SvgWarningIcon({
-  id = "Warning icon",
+export default function SvgExclamationIcon({
+  id = "Exclamation icon",
   currentColor = "#CE3E39",
 }) {
   return (
@@ -11,7 +11,7 @@ export default function SvgWarningIcon({
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g id="20px/Error icon">
+      <g id="20px/Exclamation icon">
         <path
           id="Icon"
           d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
diff --git a/packages/react-components/src/components/SvgExclamationIcon/index.ts b/packages/react-components/src/components/SvgExclamationIcon/index.ts
new file mode 100644
index 00000000..bb4c1241
--- /dev/null
+++ b/packages/react-components/src/components/SvgExclamationIcon/index.ts
@@ -0,0 +1 @@
+export { default } from "./SvgExclamationIcon";
diff --git a/packages/react-components/src/components/SvgWarningIcon/index.ts b/packages/react-components/src/components/SvgWarningIcon/index.ts
deleted file mode 100644
index 7dfc2969..00000000
--- a/packages/react-components/src/components/SvgWarningIcon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SvgWarningIcon";

From e51075e7c8679ccf7b47a5e4994758b7b70c83e3 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:20:06 -0700
Subject: [PATCH 32/45] fix naming error in SVG URL

---
 packages/react-components/src/components/TextArea/TextArea.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 1cc83fd3..cc0adbf6 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -123,7 +123,7 @@
 
 /* Warning icon */
 .bcds-react-aria-TextArea--Error::before {
-  content: url("../src/assets/icon-error.svg");
+  content: url("../src/assets/icon-exclamation.svg");
   display: inline-block;
   vertical-align: middle;
   padding-right: var(--layout-padding-xsmall);

From 187086faa3299b7b8dd03300b8e549cbb3d849f8 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:25:38 -0700
Subject: [PATCH 33/45] bump storybook to 8.2.5

---
 packages/react-components/package-lock.json | 561 +++++++-------------
 packages/react-components/package.json      |  18 +-
 2 files changed, 195 insertions(+), 384 deletions(-)

diff --git a/packages/react-components/package-lock.json b/packages/react-components/package-lock.json
index ae2b9d41..42a1d711 100644
--- a/packages/react-components/package-lock.json
+++ b/packages/react-components/package-lock.json
@@ -18,14 +18,14 @@
         "@rollup/plugin-json": "6.1.0",
         "@rollup/plugin-node-resolve": "15.2.3",
         "@rollup/plugin-typescript": "11.1.6",
-        "@storybook/addon-a11y": "8.2.3",
-        "@storybook/addon-essentials": "8.2.3",
-        "@storybook/addon-interactions": "8.2.3",
-        "@storybook/addon-links": "8.2.3",
-        "@storybook/blocks": "8.2.3",
-        "@storybook/react": "8.2.3",
-        "@storybook/react-vite": "8.2.3",
-        "@storybook/test": "8.2.3",
+        "@storybook/addon-a11y": "8.2.5",
+        "@storybook/addon-essentials": "8.2.5",
+        "@storybook/addon-interactions": "8.2.5",
+        "@storybook/addon-links": "8.2.5",
+        "@storybook/blocks": "8.2.5",
+        "@storybook/react": "8.2.5",
+        "@storybook/react-vite": "8.2.5",
+        "@storybook/test": "8.2.5",
         "@storybook/test-runner": "0.19.1",
         "@testing-library/jest-dom": "6.4.5",
         "@testing-library/react": "16.0.0",
@@ -47,7 +47,7 @@
         "rollup-plugin-dts": "6.1.1",
         "rollup-plugin-peer-deps-external": "2.2.4",
         "rollup-plugin-postcss": "4.0.2",
-        "storybook": "8.2.3",
+        "storybook": "8.2.5",
         "ts-jest": "29.1.4",
         "ts-node": "10.9.2",
         "tslib": "2.6.2",
@@ -5528,12 +5528,12 @@
       }
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.2.3.tgz",
-      "integrity": "sha512-n8xKaqXQFWvmiIIBBCvthn9Kjpmw9C4vkxRfwODSw+uxyAH9yaLIpKR3YH3YYxnmiy2xkj90AT5BSoPoRgroCA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.2.5.tgz",
+      "integrity": "sha512-sQxX/6mVSF15JnB/HEPrfY43Z6SvgyzAQYfMvqWS+sQBK04busLJBWElQRgekZo80sDCq52mq98lm+ZgpZs42A==",
       "dev": true,
       "dependencies": {
-        "@storybook/addon-highlight": "8.2.3",
+        "@storybook/addon-highlight": "8.2.5",
         "axe-core": "^4.2.0"
       },
       "funding": {
@@ -5541,13 +5541,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.2.3.tgz",
-      "integrity": "sha512-7ntW+hK2f0EtEZ08BRYdaMDdeCJY5IyRbaXhclMzo4FK4W3vsRnSMu+t61K42+/3+bJC8z2bnjZPrh2b7gJ34w==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.2.5.tgz",
+      "integrity": "sha512-8kevyvbvEdo0qn+hL/ub/RVsCGlWvCgL6ZAsZm50aWl1GXPpXj3nggKnyJwgAGUQzDC0CDPlNpSOP4ri3NY8tw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5561,13 +5561,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.2.3.tgz",
-      "integrity": "sha512-u3HMoN42ILpaZN+YWwgQl7togczS8FBX+KkTyxBqeWIsiPgXPWANABcquWARNajtyW3XpjrWzJPEhWehMQl2+Q==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.2.5.tgz",
+      "integrity": "sha512-FZowGG+58qWHePjE6tGTTjT+m4/ZTI1uZD7GA++phdi5m8V/LGwJl8zBNZqUha/ygJ0i3Yvnj4tclWDSa8wtnQ==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5579,13 +5579,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.2.3.tgz",
-      "integrity": "sha512-rylp7QNPS+sUx20YXAROLx7HLF1xRtBmICYBpU7wKOOufmIAM55ol8PvpQQ97J1XE/mH95FWY8bIQ3fXAqnB1g==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.2.5.tgz",
+      "integrity": "sha512-8IoeEmiOyg5aTIyW4gdUUV/xJZk8y5bACkNhDTIepyfTZLoVNsVXS1tjqrG4EXQR6dNY4XV9dDIUIRI11/K6tQ==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.2",
@@ -5597,21 +5597,21 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.2.3.tgz",
-      "integrity": "sha512-5glPip8Oex9npUTfVkkO1WMmbwpwUbu+04Uk6Vr30g+p2svGHH2qlKhWIu4g+Jx6s2ogMV47oj9Zl8jrXjNyPA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.2.5.tgz",
+      "integrity": "sha512-fJ2Aam6rQO5BVRIDrA4gVxxnVmMCkk4wC6RDi8oSTOcjM0FRl3ktv+6gPbNWq/+b8dqU23Y4wSyM4UUAIP0PAA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.24.4",
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.2.3",
-        "@storybook/csf-plugin": "8.2.3",
+        "@storybook/blocks": "8.2.5",
+        "@storybook/csf-plugin": "8.2.5",
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.2.3",
+        "@storybook/react-dom-shim": "8.2.5",
         "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "fs-extra": "^11.1.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -5625,24 +5625,24 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.2.3.tgz",
-      "integrity": "sha512-M+43RTtugiqKchs6xjzSO7ZRFzhr6U+xOKaW8tfAdzheTRnT3moXSIoJn6w5rEiqvUAWtpswigKRcsxhbtL2qw==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "8.2.3",
-        "@storybook/addon-backgrounds": "8.2.3",
-        "@storybook/addon-controls": "8.2.3",
-        "@storybook/addon-docs": "8.2.3",
-        "@storybook/addon-highlight": "8.2.3",
-        "@storybook/addon-measure": "8.2.3",
-        "@storybook/addon-outline": "8.2.3",
-        "@storybook/addon-toolbars": "8.2.3",
-        "@storybook/addon-viewport": "8.2.3",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.2.5.tgz",
+      "integrity": "sha512-SmA4QOiI9/d9bycagStm1gtlt2iR1EpWXJnhct4oqcj5nxmp+jviyhv1Pb+Rm/zKNE5qcaI4AcRDRVTJRUwESw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "8.2.5",
+        "@storybook/addon-backgrounds": "8.2.5",
+        "@storybook/addon-controls": "8.2.5",
+        "@storybook/addon-docs": "8.2.5",
+        "@storybook/addon-highlight": "8.2.5",
+        "@storybook/addon-measure": "8.2.5",
+        "@storybook/addon-outline": "8.2.5",
+        "@storybook/addon-toolbars": "8.2.5",
+        "@storybook/addon-viewport": "8.2.5",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -5650,13 +5650,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.2.3.tgz",
-      "integrity": "sha512-uc2dlZv7OkM5DGeN1wR7aZ4hmH1n6B38dlFzVh0rx+kghtSyUcQsaFPKR36Ky6cHHXa1z93TvEXJKkA1KtM7oQ==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.2.5.tgz",
+      "integrity": "sha512-fgzmilW3jGD68xYiR8sRjOB+joETc6/2+Fmj4S85BNnKy2ViXc1D+LHIw1id5/oT9MNN1i62D517EXRZkPakGw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -5666,18 +5666,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.2.3.tgz",
-      "integrity": "sha512-cRoz959E4XkxDLE6CR9yAQTjV4CaCZqW/O2gPQnarqXDo2sac4zisi7npa5LhVDA4yuiPVCCt7bKGSD1Yd0/+g==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.2.5.tgz",
+      "integrity": "sha512-YVdpU/VRrRvX3BUiYxno6jDttbbQxngOkgcY8u+LLXbo3LfFLeXwpUmJXvGOrIU1wDHsZ4FAPBS/beFntcFhBw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.2.3",
-        "@storybook/test": "8.2.3",
+        "@storybook/instrumenter": "8.2.5",
+        "@storybook/test": "8.2.5",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
       },
@@ -5686,13 +5686,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.2.3.tgz",
-      "integrity": "sha512-PAVj0ArWpW0Mwva4UzKZs1AxaUMmMTKsF5PFzUJ2fpHTfXOAnST59twDRn11XyWlb4QS+Ek0ok3k/scvOYbAyg==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.2.5.tgz",
+      "integrity": "sha512-jcD1/KXSqEE/QkQtBx3beD7UQJ3NQLEqYjCiF6UzsdFzcbfgAlfL5fKv8Lh/g8VynPcQzpfhMnSkj445EmF9hQ==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
@@ -5705,7 +5705,7 @@
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5714,9 +5714,9 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.2.3.tgz",
-      "integrity": "sha512-IgvGUTLQfTCUBv8k+lRk6Wq550W/g+N1vDUHLw1iAfvvqTf5ZQYG54tDa2ad0wPj+yDIJrL0GwKVXsFnb5o1PA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.2.5.tgz",
+      "integrity": "sha512-rC/kukXM+3Sd1U5Wboozs82p3rLaHBRCmQfk3bFhWyGKvbYWEWmSr7w0DLH8/X7pi1u8IMSqeRll7tDJrEXeaw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5727,13 +5727,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.2.3.tgz",
-      "integrity": "sha512-AOIxOLxq0I8gp9du8K5w+5ohNwShcTBNxKnwdKel+iOP+mjB0ygVV4cfVa/Z3q1IqW/fMiA+YtRElLkxZaWRoQ==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.2.5.tgz",
+      "integrity": "sha512-YRS60tyZH79FfH9NEOndGVG/AmlXdYMd3nT2XfMBPZ+uTay/hcUzp6/wVsL+ucyVXi0avHbyNjY+iFP6m/MhRw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5744,26 +5744,26 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.2.3.tgz",
-      "integrity": "sha512-kRnisYanm+ylch06paBgaIfkaTHeeORra64acGULefDuCpexM9eSakP9lupCNBYS1Q/PaURnoih3IcrWjFhQGQ==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.2.5.tgz",
+      "integrity": "sha512-XqjJxpXjTKurL81QF+Xa69J/8TSstXvLWVqeX+132C0//Yq3VeUir87hvI2qw/qbQT9sGeRX72vqKhoxS+kvIQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.2.3.tgz",
-      "integrity": "sha512-JqR0GNfHC/vq2hsi1UwXI/LHT07BouT2Z6/b+FjKoGZIEs/XiV1Mn58FS6dCAwzgF96TWipDo5J6mJF99BjZQQ==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.2.5.tgz",
+      "integrity": "sha512-QH2A+rzoMf8dcREOUpAsx1vvP7w3MQ8HbZCawk7KdkW/KS0L8zhkHfsNL9cfLcgCJA0wtOmRPD25ZVGoxUAHSA==",
       "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"
@@ -5773,13 +5773,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.2.3.tgz",
-      "integrity": "sha512-izbyT+6bV2/0dApRh97kJZWEwXKTMIU6zmvI8bD4Ii/cWtd2c8KchKM4s00t11kaCg5yuaqGL60MRs/YT/QHQw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.2.5.tgz",
+      "integrity": "sha512-SJXo9NxgdXEeFA4OgfMaffjOxFBrMFIq/27F6/Z+JEs6lHZhayaBsofFcVbKEtivsg9+MbOLnN1TbwgnjjRw5g==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
@@ -5804,7 +5804,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5816,12 +5816,12 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.2.3.tgz",
-      "integrity": "sha512-EGjs3bjvRCmXofC8etbXbhAb+7ahG3c4kmo/wxCeTZPEbPy4WNn4SSoZyxpNDv3OIYGdWQ+SJsjaNCqqPVy1DA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.2.5.tgz",
+      "integrity": "sha512-5CiJY+vJKt8FpEK0MVAXrIj4UDahi4fxPoUYcxawaYHTCpspaxFtLrHuNQkDbyDSjBednIMOIAm8ei2pha3Z6Q==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf-plugin": "8.2.3",
+        "@storybook/csf-plugin": "8.2.5",
         "@types/find-cache-dir": "^3.2.1",
         "browser-assert": "^1.2.1",
         "es-module-lexer": "^1.5.0",
@@ -5837,7 +5837,7 @@
       },
       "peerDependencies": {
         "@preact/preset-vite": "*",
-        "storybook": "^8.2.3",
+        "storybook": "^8.2.5",
         "typescript": ">= 4.3.x",
         "vite": "^4.0.0 || ^5.0.0",
         "vite-plugin-glimmerx": "*"
@@ -5855,15 +5855,15 @@
       }
     },
     "node_modules/@storybook/codemod": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.3.tgz",
-      "integrity": "sha512-mAc22OJthMr1oaGVKRbO05sveTUhcWhdgN4nQKf7wLfXjW73mMgrblao+mxiWIfhXIjbOB5xgw3Csi9pcy6Kkw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.5.tgz",
+      "integrity": "sha512-bUCvOqW3LUjz6epmTfocWBm0S7Ae52xmHvhVqgAUsKp9bVw2CGt9uaPR8dVE4IfI1yJZKRjf3u7Y60OTfWew4g==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.24.4",
         "@babel/preset-env": "^7.24.4",
         "@babel/types": "^7.24.0",
-        "@storybook/core": "8.2.3",
+        "@storybook/core": "8.2.5",
         "@storybook/csf": "0.1.11",
         "@types/cross-spawn": "^6.0.2",
         "cross-spawn": "^7.0.3",
@@ -5923,10 +5923,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@storybook/components": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.2.5.tgz",
+      "integrity": "sha512-/cqAzQ1w9tK44BvKDNkY3MxcqoDaMvZeI5c4rGh/nYMjulXV4cAOTSlVK07XfkOJENj/wHHSDz8tZTrl2FhmuQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.5"
+      }
+    },
     "node_modules/@storybook/core": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.2.3.tgz",
-      "integrity": "sha512-6CV6P8ES7E+vQZEuJTdLhgC3Lo7iRy+tpc/3przT25EStzNTR3TW2X31KUn7BfY2fuxCFPzftPaSJ/LEi7zHqg==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-KjaeIkbdcog4Jmx3MoSjQZpfESin1qHEcFiLoOkICOpuKsj37xdMFcuSre8IbcVGCJPkt1RvEmfeu1N90jOgww==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
@@ -5947,9 +5960,9 @@
       }
     },
     "node_modules/@storybook/core/node_modules/@types/node": {
-      "version": "18.19.40",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.40.tgz",
-      "integrity": "sha512-MIxieZHrm4Ee8XArBIc+Or9HINt2StOmCbgRcXGSJl8q14svRvkZPe7LJq9HKtTI1SK3wU8b91TjntUm7T69Pg==",
+      "version": "18.19.41",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.41.tgz",
+      "integrity": "sha512-LX84pRJ+evD2e2nrgYCHObGWkiQJ1mL+meAgbvnwk/US6vmMY7S2ygBTGV2Jw91s9vUsLSXeDEkUHZIJGLrhsg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -5965,9 +5978,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.2.3.tgz",
-      "integrity": "sha512-j6w9hD/Ze4utK4Hg5ILKsgGkN4QwYaCo67vKsyUB78Y1v7WiWQIM6UsuOVwXGL1SpAtF5NDtu/92/jAJ094zqw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.2.5.tgz",
+      "integrity": "sha512-YpkvfDbKyilI54QMz/NyHGOlXxVeE+3LTKLx4GV/JrnGW+EtqQTYNaWWnTsesX0AsUICBAvxqyO9HtFtRjeL+Q==",
       "dev": true,
       "dependencies": {
         "unplugin": "^1.3.1"
@@ -5977,7 +5990,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/global": {
@@ -6000,9 +6013,9 @@
       }
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.2.3.tgz",
-      "integrity": "sha512-LXG4Qvq2CMpoFr1OwstvfPZ/UwAQeT3mdqiW478QQ00RcYUUSfftts6D33+zZFG3LrZr+yy8eTZ/sov/rVAWZA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.2.5.tgz",
+      "integrity": "sha512-HeETFUYYZDM3A76oO8p7V1nCrxdAglhO+3FtPa2EqSWueYISANyOOTu/8NIW3EbKP3GsfWi509ofQhsLBHy9dQ==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -6014,17 +6027,47 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
+      }
+    },
+    "node_modules/@storybook/manager-api": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.2.5.tgz",
+      "integrity": "sha512-4UHRlpcbYF2UiO9tonafnJMC2wJXWjTXivHjuf3ehbJXmopkNe/4zLtNTRyf3Hozf4CuYtNotw0tXflBrGlIlw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.5"
+      }
+    },
+    "node_modules/@storybook/preview-api": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.2.5.tgz",
+      "integrity": "sha512-C5A3MtubUM5Tq1An1gIqiEmiBX4ybaTzAeBuohsqToPmWHvM2uIdSl6XpTyQQJowkvrqBKjchqZUy/2mynX4lQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/react": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.2.3.tgz",
-      "integrity": "sha512-818F6pJWFBiwG0r6DiUVrV+qndwbIso2gtgJoituBgIJO2eIzNmkPNSsckbaR7u+FpE4dWiIIhmDVZSnRwvDlA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.2.5.tgz",
+      "integrity": "sha512-Wgr7a8ZHSDIJyKNDEYdwwu+AEkaG1yM7UBBmROr8WrYHgKaC49ekEgY0i3bck6HArUvu3A6Z448mJTMY+XtK5Q==",
       "dev": true,
       "dependencies": {
+        "@storybook/components": "^8.2.5",
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.2.3",
+        "@storybook/manager-api": "^8.2.5",
+        "@storybook/preview-api": "^8.2.5",
+        "@storybook/react-dom-shim": "8.2.5",
+        "@storybook/theming": "^8.2.5",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^18.0.0",
@@ -6051,7 +6094,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.3",
+        "storybook": "^8.2.5",
         "typescript": ">= 4.2.x"
       },
       "peerDependenciesMeta": {
@@ -6061,9 +6104,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.2.3.tgz",
-      "integrity": "sha512-N8AsM6N1S867GGWt2J2q5oY5ryqxohh3y1HqNtjg+wXf5+RkTD6M2Cgqe6p+JHz81nDKyvvVzP60MvvDhY5VOA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.2.5.tgz",
+      "integrity": "sha512-r+ZppgZR1AmM+2E9GRIaL/JjD3C/kl8sexD1mrGN4PBzrqqy6BNedHroWvf9JmfAvD/bp55peJ+LWAsSU/NvQQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -6072,19 +6115,19 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.2.3.tgz",
-      "integrity": "sha512-a7HKCu/rd7GyzG1sr0W13gaOC1kEzJfGxI+Nb8RrH5+yRH5atYEsiBD80hdJNbOGdgp4LInBHZKiq0xE8VJ8xQ==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.2.5.tgz",
+      "integrity": "sha512-6Y4SdCfX0fvOVRJygFXrohiGQyEw2ByKqhQ/3Mw/jX2nIbauKWrGi56g7l8DBbaUJ122gN44xBsz+5KGCH8UGQ==",
       "dev": true,
       "dependencies": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "8.2.3",
-        "@storybook/react": "8.2.3",
+        "@storybook/builder-vite": "8.2.5",
+        "@storybook/react": "8.2.5",
         "find-up": "^5.0.0",
         "magic-string": "^0.30.0",
         "react-docgen": "^7.0.0",
@@ -6101,7 +6144,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.3",
+        "storybook": "^8.2.5",
         "vite": "^4.0.0 || ^5.0.0"
       }
     },
@@ -6133,13 +6176,13 @@
       }
     },
     "node_modules/@storybook/test": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.3.tgz",
-      "integrity": "sha512-vDvDNZzqupf+p5RHOzFaBEYjp2dBnUeXO8cjtwK7nkOJUmrnP2g+aYfCYIJXsnK+iOjOhrGVGZiqR/gW8R669w==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.5.tgz",
+      "integrity": "sha512-8fo5qh3dNTlcUsnpYB5klcsnjIhEpkyVC+KCqapDI/iFD6qDmZXzbEcP/HsVMICwGTanr2kFCmf5c8kfAiOMew==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
-        "@storybook/instrumenter": "8.2.3",
+        "@storybook/instrumenter": "8.2.5",
         "@testing-library/dom": "10.1.0",
         "@testing-library/jest-dom": "6.4.5",
         "@testing-library/user-event": "14.5.2",
@@ -6152,7 +6195,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.3"
+        "storybook": "^8.2.5"
       }
     },
     "node_modules/@storybook/test-runner": {
@@ -6191,56 +6234,6 @@
         "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
       }
     },
-    "node_modules/@storybook/test-runner/node_modules/@storybook/codemod": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.4.tgz",
-      "integrity": "sha512-QcZdqjX4NvkVcWR3yI9it3PfqmBOCR+3iY6j4PmG7p5IE0j9kXMKBbeFrBRprSijHKlwcjbc3bRx2SnKF6AFEg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/preset-env": "^7.24.4",
-        "@babel/types": "^7.24.0",
-        "@storybook/core": "8.2.4",
-        "@storybook/csf": "0.1.11",
-        "@types/cross-spawn": "^6.0.2",
-        "cross-spawn": "^7.0.3",
-        "globby": "^14.0.1",
-        "jscodeshift": "^0.15.1",
-        "lodash": "^4.17.21",
-        "prettier": "^3.1.1",
-        "recast": "^0.23.5",
-        "tiny-invariant": "^1.3.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/@storybook/core": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.2.4.tgz",
-      "integrity": "sha512-jePmsGZT2hhUNQs8ED6+hFVt2m4hrMseO8kkN7Mcsve1MIujzHUS7Gjo4uguBwHJJOtiXB2fw4OSiQCmsXscZA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@storybook/csf": "0.1.11",
-        "@types/express": "^4.17.21",
-        "@types/node": "^18.0.0",
-        "browser-assert": "^1.2.1",
-        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0",
-        "esbuild-register": "^3.5.0",
-        "express": "^4.19.2",
-        "process": "^0.11.10",
-        "recast": "^0.23.5",
-        "util": "^0.12.4",
-        "ws": "^8.2.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/test-runner/node_modules/@storybook/core-common": {
       "version": "8.2.4",
       "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-8.2.4.tgz",
@@ -6267,201 +6260,6 @@
         "storybook": "^8.2.4"
       }
     },
-    "node_modules/@storybook/test-runner/node_modules/@storybook/preview-api": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.2.4.tgz",
-      "integrity": "sha512-IxOiUYYzNnk1OOz3zQBhsa3P1fsgqeMBZcH7TjiQWs9osuWG20oqsFR6+Z3dxoW8IuQHvpnREGKvAbRsDsThcA==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.4"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/@types/node": {
-      "version": "18.19.40",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.40.tgz",
-      "integrity": "sha512-MIxieZHrm4Ee8XArBIc+Or9HINt2StOmCbgRcXGSJl8q14svRvkZPe7LJq9HKtTI1SK3wU8b91TjntUm7T69Pg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/commander": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/globby": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
-      "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@sindresorhus/merge-streams": "^2.1.0",
-        "fast-glob": "^3.3.2",
-        "ignore": "^5.2.4",
-        "path-type": "^5.0.0",
-        "slash": "^5.1.0",
-        "unicorn-magic": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/path-type": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
-      "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/slash": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
-      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/storybook": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.4.tgz",
-      "integrity": "sha512-ASavW8vIHiWpFY+4M6ngeqK5oL4OkxqdpmQYxvRqH0gA1G1hfq/vmDw4YC4GnqKwyWPQh2kaV5JFurKZVaeaDQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/types": "^7.24.0",
-        "@storybook/codemod": "8.2.4",
-        "@storybook/core": "8.2.4",
-        "@types/semver": "^7.3.4",
-        "@yarnpkg/fslib": "2.10.3",
-        "@yarnpkg/libzip": "2.3.0",
-        "chalk": "^4.1.0",
-        "commander": "^6.2.1",
-        "cross-spawn": "^7.0.3",
-        "detect-indent": "^6.1.0",
-        "envinfo": "^7.7.3",
-        "execa": "^5.0.0",
-        "fd-package-json": "^1.2.0",
-        "find-up": "^5.0.0",
-        "fs-extra": "^11.1.0",
-        "giget": "^1.0.0",
-        "globby": "^14.0.1",
-        "jscodeshift": "^0.15.1",
-        "leven": "^3.1.0",
-        "ora": "^5.4.1",
-        "prettier": "^3.1.1",
-        "prompts": "^2.4.0",
-        "semver": "^7.3.7",
-        "strip-json-comments": "^3.0.1",
-        "tempy": "^3.1.0",
-        "tiny-invariant": "^1.3.1",
-        "ts-dedent": "^2.0.0"
-      },
-      "bin": {
-        "getstorybook": "bin/index.cjs",
-        "sb": "bin/index.cjs",
-        "storybook": "bin/index.cjs"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/test-runner/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/test/node_modules/@testing-library/dom": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
@@ -6533,6 +6331,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/@storybook/theming": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.2.5.tgz",
+      "integrity": "sha512-EEOSmW55MeLB3iskf5uUqffsqu003tTta8XQ1Xg8em3gePxPsjqzQtly1Ws5PtRg1Zvt1Zc6NKHwabiVzxothA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.5"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.6.13",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.6.13.tgz",
@@ -17894,15 +17705,15 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.3.tgz",
-      "integrity": "sha512-uGjoFasTDWaeLp+pz8jCdKfSOvBTNEBpGf2C+pwZkJpd5CHrUlq4dkfE0/Kv/MtyQI1W9Fgbinbj7ggNe0D3Cg==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.5.tgz",
+      "integrity": "sha512-nfcly5CY3D6KuHbsfhScPaGeraRA9EJhO9GF00/dnI0GXW4ILS8Kwket515IkKAuKcdjdZis6maEuosbG//Kbg==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.24.4",
         "@babel/types": "^7.24.0",
-        "@storybook/codemod": "8.2.3",
-        "@storybook/core": "8.2.3",
+        "@storybook/codemod": "8.2.5",
+        "@storybook/core": "8.2.5",
         "@types/semver": "^7.3.4",
         "@yarnpkg/fslib": "2.10.3",
         "@yarnpkg/libzip": "2.3.0",
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 11651979..823c5072 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -37,14 +37,14 @@
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
-    "@storybook/addon-a11y": "8.2.3",
-    "@storybook/addon-essentials": "8.2.3",
-    "@storybook/addon-interactions": "8.2.3",
-    "@storybook/addon-links": "8.2.3",
-    "@storybook/blocks": "8.2.3",
-    "@storybook/react": "8.2.3",
-    "@storybook/react-vite": "8.2.3",
-    "@storybook/test": "8.2.3",
+    "@storybook/addon-a11y": "8.2.5",
+    "@storybook/addon-essentials": "8.2.5",
+    "@storybook/addon-interactions": "8.2.5",
+    "@storybook/addon-links": "8.2.5",
+    "@storybook/blocks": "8.2.5",
+    "@storybook/react": "8.2.5",
+    "@storybook/react-vite": "8.2.5",
+    "@storybook/test": "8.2.5",
     "@storybook/test-runner": "0.19.1",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "16.0.0",
@@ -66,7 +66,7 @@
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "8.2.3",
+    "storybook": "8.2.5",
     "ts-jest": "29.1.4",
     "ts-node": "10.9.2",
     "tslib": "2.6.2",

From 583dc651cd7dae1753df4d93957c4781afc475c1 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:32:24 -0700
Subject: [PATCH 34/45] correct typo

---
 .../src/components/SvgExclamationIcon/SvgExclamationIcon.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
index 5c700053..4c68dc12 100644
--- a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
+++ b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
@@ -1,4 +1,4 @@
-// This logo is available as a plain SVG at src/assets/icon-warning.svg
+// This icon is available as a plain SVG at src/assets/icon-exclamation.svg
 export default function SvgExclamationIcon({
   id = "Exclamation icon",
   currentColor = "#CE3E39",

From 09183ac4c9a0628d63fd20987bc856bcbee39b9e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:36:23 -0700
Subject: [PATCH 35/45] fix errors in static SVG

---
 packages/react-components/src/assets/icon-exclamation.svg | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/assets/icon-exclamation.svg b/packages/react-components/src/assets/icon-exclamation.svg
index 51f2f423..b014cc3e 100644
--- a/packages/react-components/src/assets/icon-exclamation.svg
+++ b/packages/react-components/src/assets/icon-exclamation.svg
@@ -3,14 +3,12 @@
     height="20"
     viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
-    id="20px/Exclamation icon"
-    currentColor="#CE3E39"
   >
     <g>
       <path
-        id="Icon"
+        id="20px/Exclamation icon"
         d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
-        fill={currentColor}
+        fill="currentColor"
       />
     </g>
 </svg>

From d19ccdb10f6b417a932c68199a740e33c0fa2a38 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:38:30 -0700
Subject: [PATCH 36/45] remove unnecessary styling from react SVG

---
 .../components/SvgExclamationIcon/SvgExclamationIcon.tsx   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
index 4c68dc12..00bc296c 100644
--- a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
+++ b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
@@ -1,8 +1,5 @@
 // This icon is available as a plain SVG at src/assets/icon-exclamation.svg
-export default function SvgExclamationIcon({
-  id = "Exclamation icon",
-  currentColor = "#CE3E39",
-}) {
+export default function SvgExclamationIcon({ id = "Exclamation icon" }) {
   return (
     <svg
       id={id}
@@ -15,7 +12,7 @@ export default function SvgExclamationIcon({
         <path
           id="Icon"
           d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
-          fill={currentColor}
+          fill="currentColor"
         />
       </g>
     </svg>

From 3f9784010c78f8ef330321039ae3e43cb1f9c8b8 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:46:46 -0700
Subject: [PATCH 37/45] icon styling

---
 packages/react-components/src/components/TextArea/TextArea.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index cc0adbf6..afc52236 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -124,6 +124,7 @@
 /* Warning icon */
 .bcds-react-aria-TextArea--Error::before {
   content: url("../src/assets/icon-exclamation.svg");
+  color: var(--icons-color-danger);
   display: inline-block;
   vertical-align: middle;
   padding-right: var(--layout-padding-xsmall);

From 40bfbdbcdfde0b1879b3a3373e9f147c8f142595 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:53:25 -0700
Subject: [PATCH 38/45] update textarea story settings

---
 packages/react-components/src/stories/TextArea.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextArea.stories.tsx b/packages/react-components/src/stories/TextArea.stories.tsx
index c34700ae..3389bf13 100644
--- a/packages/react-components/src/stories/TextArea.stories.tsx
+++ b/packages/react-components/src/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextArea } from "../components";
 
 const meta = {
-  title: "Components/TextArea",
+  title: "Components/TextArea/TextArea",
   component: TextArea,
   parameters: {
     layout: "centered",
@@ -41,6 +41,10 @@ const meta = {
       control: "number",
       description: "Maximum character length for this input",
     },
+    errorMessage: {
+      control: { type: "text" },
+      description: "Error message text that appears when `isInvalid` is true",
+    },
   },
 } satisfies Meta<typeof TextArea>;
 

From 49038e3898f87f9ed629a9bb1f67fcd48966eb3f Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:56:40 -0700
Subject: [PATCH 39/45] clean up description field styling

---
 .../react-components/src/components/TextArea/TextArea.css  | 4 ++--
 .../react-components/src/components/TextArea/TextArea.tsx  | 7 ++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index afc52236..9c251797 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -28,13 +28,13 @@
 }
 
 /* Description label */
-.bcds-react-aria-TextArea--Description .text {
+.bcds-react-aria-TextArea--Description > .text {
   justify-self: flex-start;
   grid-row: 1;
 }
 
 /* Character counter */
-.bcds-react-aria-TextArea--Description .counter {
+.bcds-react-aria-TextArea--Description > .counter {
   justify-self: flex-end;
   grid-row: 1;
 }
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 7705ae54..15fc7e0b 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -61,15 +61,12 @@ export default function TextArea({
           {description || maxLength ? (
             <div className="bcds-react-aria-TextArea--Description">
               {description && (
-                <Text
-                  slot="description"
-                  className="bcds-react-aria-TextArea--Description text"
-                >
+                <Text slot="description" className="text">
                   {description}
                 </Text>
               )}
               {maxLength && (
-                <div className="bcds-react-aria-TextArea--Description counter">
+                <div className="counter">
                   {charCount}/{maxLength}
                 </div>
               )}

From d072d78dd24718c3ad214a2f7d91c13c4398d1fb Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 11:10:42 -0700
Subject: [PATCH 40/45] reimplement error icon using react component

---
 .../src/components/TextArea/TextArea.css             | 11 +++++------
 .../src/components/TextArea/TextArea.tsx             | 12 ++++++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 9c251797..106c99ab 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -117,15 +117,14 @@
 
 /* Styles for the error message slot */
 .bcds-react-aria-TextArea--Error {
+  display: flex;
   font: var(--typography-regular-small-body);
   color: var(--typography-color-danger);
 }
 
-/* Warning icon */
-.bcds-react-aria-TextArea--Error::before {
-  content: url("../src/assets/icon-exclamation.svg");
-  color: var(--icons-color-danger);
-  display: inline-block;
-  vertical-align: middle;
+.bcds-react-aria-TextArea--Error > svg {
   padding-right: var(--layout-padding-xsmall);
+  color: var(--icons-color-danger);
+  width: var(--icons-size-medium);
+  height: var(--icons-size-medium);
 }
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index 15fc7e0b..c7388f54 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -10,6 +10,7 @@ import {
 } from "react-aria-components";
 
 import "./TextArea.css";
+import SvgExclamationIcon from "../SvgExclamationIcon";
 
 export interface TextAreaProps extends ReactAriaTextFieldProps {
   /* Sets text label above text input field */
@@ -39,7 +40,7 @@ export default function TextArea({
 
   return (
     <ReactAriaTextField className={`bcds-react-aria-TextArea`} {...props}>
-      {({ isRequired }) => (
+      {({ isRequired, isInvalid }) => (
         <>
           {label && (
             <Label className="bcds-react-aria-TextArea--Label">
@@ -72,9 +73,12 @@ export default function TextArea({
               )}
             </div>
           ) : null}
-          <FieldError className="bcds-react-aria-TextArea--Error">
-            {errorMessage}
-          </FieldError>
+          {isInvalid && (
+            <div className="bcds-react-aria-TextArea--Error">
+              <SvgExclamationIcon />
+              <FieldError>{errorMessage}</FieldError>
+            </div>
+          )}
         </>
       )}
     </ReactAriaTextField>

From 77af9b68da610bd3117e6ed2ff7a1fc72a08ecf0 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 11:32:13 -0700
Subject: [PATCH 41/45] clean up styling and fix spacing issue

---
 .../react-components/src/components/TextArea/TextArea.css  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 106c99ab..20218555 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -11,7 +11,6 @@
 .bcds-react-aria-TextArea--Label {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-primary);
-  padding: var(--layout-margin-hair) 0px;
 }
 
 .bcds-react-aria-TextArea--Label .required {
@@ -21,10 +20,10 @@
 
 /* Styles for the description and character count slot below the input field */
 .bcds-react-aria-TextArea--Description {
-  font: var(--typography-regular-small-body);
-  color: var(--typography-color-secondary);
   display: grid;
   gap: var(--layout-margin-medium);
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
 }
 
 /* Description label */
@@ -51,8 +50,8 @@
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
-  margin: var(--layout-margin-small) var(--layout-margin-none);
   padding: var(--layout-padding-small) 12px;
+  margin: var(--layout-margin-small) var(--layout-margin-none);
 }
 
 /* Text input field */

From 1f718f08c6ab029024f6800c094e8dc787024b8f Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 11:32:45 -0700
Subject: [PATCH 42/45] Revert "bump storybook to 8.2.5"

This reverts commit 187086faa3299b7b8dd03300b8e549cbb3d849f8.
---
 packages/react-components/package-lock.json | 561 +++++++++++++-------
 packages/react-components/package.json      |  18 +-
 2 files changed, 384 insertions(+), 195 deletions(-)

diff --git a/packages/react-components/package-lock.json b/packages/react-components/package-lock.json
index 42a1d711..ae2b9d41 100644
--- a/packages/react-components/package-lock.json
+++ b/packages/react-components/package-lock.json
@@ -18,14 +18,14 @@
         "@rollup/plugin-json": "6.1.0",
         "@rollup/plugin-node-resolve": "15.2.3",
         "@rollup/plugin-typescript": "11.1.6",
-        "@storybook/addon-a11y": "8.2.5",
-        "@storybook/addon-essentials": "8.2.5",
-        "@storybook/addon-interactions": "8.2.5",
-        "@storybook/addon-links": "8.2.5",
-        "@storybook/blocks": "8.2.5",
-        "@storybook/react": "8.2.5",
-        "@storybook/react-vite": "8.2.5",
-        "@storybook/test": "8.2.5",
+        "@storybook/addon-a11y": "8.2.3",
+        "@storybook/addon-essentials": "8.2.3",
+        "@storybook/addon-interactions": "8.2.3",
+        "@storybook/addon-links": "8.2.3",
+        "@storybook/blocks": "8.2.3",
+        "@storybook/react": "8.2.3",
+        "@storybook/react-vite": "8.2.3",
+        "@storybook/test": "8.2.3",
         "@storybook/test-runner": "0.19.1",
         "@testing-library/jest-dom": "6.4.5",
         "@testing-library/react": "16.0.0",
@@ -47,7 +47,7 @@
         "rollup-plugin-dts": "6.1.1",
         "rollup-plugin-peer-deps-external": "2.2.4",
         "rollup-plugin-postcss": "4.0.2",
-        "storybook": "8.2.5",
+        "storybook": "8.2.3",
         "ts-jest": "29.1.4",
         "ts-node": "10.9.2",
         "tslib": "2.6.2",
@@ -5528,12 +5528,12 @@
       }
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.2.5.tgz",
-      "integrity": "sha512-sQxX/6mVSF15JnB/HEPrfY43Z6SvgyzAQYfMvqWS+sQBK04busLJBWElQRgekZo80sDCq52mq98lm+ZgpZs42A==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.2.3.tgz",
+      "integrity": "sha512-n8xKaqXQFWvmiIIBBCvthn9Kjpmw9C4vkxRfwODSw+uxyAH9yaLIpKR3YH3YYxnmiy2xkj90AT5BSoPoRgroCA==",
       "dev": true,
       "dependencies": {
-        "@storybook/addon-highlight": "8.2.5",
+        "@storybook/addon-highlight": "8.2.3",
         "axe-core": "^4.2.0"
       },
       "funding": {
@@ -5541,13 +5541,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.2.5.tgz",
-      "integrity": "sha512-8kevyvbvEdo0qn+hL/ub/RVsCGlWvCgL6ZAsZm50aWl1GXPpXj3nggKnyJwgAGUQzDC0CDPlNpSOP4ri3NY8tw==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.2.3.tgz",
+      "integrity": "sha512-7ntW+hK2f0EtEZ08BRYdaMDdeCJY5IyRbaXhclMzo4FK4W3vsRnSMu+t61K42+/3+bJC8z2bnjZPrh2b7gJ34w==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5561,13 +5561,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.2.5.tgz",
-      "integrity": "sha512-FZowGG+58qWHePjE6tGTTjT+m4/ZTI1uZD7GA++phdi5m8V/LGwJl8zBNZqUha/ygJ0i3Yvnj4tclWDSa8wtnQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.2.3.tgz",
+      "integrity": "sha512-u3HMoN42ILpaZN+YWwgQl7togczS8FBX+KkTyxBqeWIsiPgXPWANABcquWARNajtyW3XpjrWzJPEhWehMQl2+Q==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5579,13 +5579,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.2.5.tgz",
-      "integrity": "sha512-8IoeEmiOyg5aTIyW4gdUUV/xJZk8y5bACkNhDTIepyfTZLoVNsVXS1tjqrG4EXQR6dNY4XV9dDIUIRI11/K6tQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.2.3.tgz",
+      "integrity": "sha512-rylp7QNPS+sUx20YXAROLx7HLF1xRtBmICYBpU7wKOOufmIAM55ol8PvpQQ97J1XE/mH95FWY8bIQ3fXAqnB1g==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.2",
@@ -5597,21 +5597,21 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.2.5.tgz",
-      "integrity": "sha512-fJ2Aam6rQO5BVRIDrA4gVxxnVmMCkk4wC6RDi8oSTOcjM0FRl3ktv+6gPbNWq/+b8dqU23Y4wSyM4UUAIP0PAA==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.2.3.tgz",
+      "integrity": "sha512-5glPip8Oex9npUTfVkkO1WMmbwpwUbu+04Uk6Vr30g+p2svGHH2qlKhWIu4g+Jx6s2ogMV47oj9Zl8jrXjNyPA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.24.4",
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.2.5",
-        "@storybook/csf-plugin": "8.2.5",
+        "@storybook/blocks": "8.2.3",
+        "@storybook/csf-plugin": "8.2.3",
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.2.5",
+        "@storybook/react-dom-shim": "8.2.3",
         "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "fs-extra": "^11.1.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -5625,24 +5625,24 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.2.5.tgz",
-      "integrity": "sha512-SmA4QOiI9/d9bycagStm1gtlt2iR1EpWXJnhct4oqcj5nxmp+jviyhv1Pb+Rm/zKNE5qcaI4AcRDRVTJRUwESw==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "8.2.5",
-        "@storybook/addon-backgrounds": "8.2.5",
-        "@storybook/addon-controls": "8.2.5",
-        "@storybook/addon-docs": "8.2.5",
-        "@storybook/addon-highlight": "8.2.5",
-        "@storybook/addon-measure": "8.2.5",
-        "@storybook/addon-outline": "8.2.5",
-        "@storybook/addon-toolbars": "8.2.5",
-        "@storybook/addon-viewport": "8.2.5",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.2.3.tgz",
+      "integrity": "sha512-M+43RTtugiqKchs6xjzSO7ZRFzhr6U+xOKaW8tfAdzheTRnT3moXSIoJn6w5rEiqvUAWtpswigKRcsxhbtL2qw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "8.2.3",
+        "@storybook/addon-backgrounds": "8.2.3",
+        "@storybook/addon-controls": "8.2.3",
+        "@storybook/addon-docs": "8.2.3",
+        "@storybook/addon-highlight": "8.2.3",
+        "@storybook/addon-measure": "8.2.3",
+        "@storybook/addon-outline": "8.2.3",
+        "@storybook/addon-toolbars": "8.2.3",
+        "@storybook/addon-viewport": "8.2.3",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -5650,13 +5650,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.2.5.tgz",
-      "integrity": "sha512-fgzmilW3jGD68xYiR8sRjOB+joETc6/2+Fmj4S85BNnKy2ViXc1D+LHIw1id5/oT9MNN1i62D517EXRZkPakGw==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.2.3.tgz",
+      "integrity": "sha512-uc2dlZv7OkM5DGeN1wR7aZ4hmH1n6B38dlFzVh0rx+kghtSyUcQsaFPKR36Ky6cHHXa1z93TvEXJKkA1KtM7oQ==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -5666,18 +5666,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.2.5.tgz",
-      "integrity": "sha512-YVdpU/VRrRvX3BUiYxno6jDttbbQxngOkgcY8u+LLXbo3LfFLeXwpUmJXvGOrIU1wDHsZ4FAPBS/beFntcFhBw==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.2.3.tgz",
+      "integrity": "sha512-cRoz959E4XkxDLE6CR9yAQTjV4CaCZqW/O2gPQnarqXDo2sac4zisi7npa5LhVDA4yuiPVCCt7bKGSD1Yd0/+g==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.2.5",
-        "@storybook/test": "8.2.5",
+        "@storybook/instrumenter": "8.2.3",
+        "@storybook/test": "8.2.3",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
       },
@@ -5686,13 +5686,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.2.5.tgz",
-      "integrity": "sha512-jcD1/KXSqEE/QkQtBx3beD7UQJ3NQLEqYjCiF6UzsdFzcbfgAlfL5fKv8Lh/g8VynPcQzpfhMnSkj445EmF9hQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.2.3.tgz",
+      "integrity": "sha512-PAVj0ArWpW0Mwva4UzKZs1AxaUMmMTKsF5PFzUJ2fpHTfXOAnST59twDRn11XyWlb4QS+Ek0ok3k/scvOYbAyg==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
@@ -5705,7 +5705,7 @@
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5714,9 +5714,9 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.2.5.tgz",
-      "integrity": "sha512-rC/kukXM+3Sd1U5Wboozs82p3rLaHBRCmQfk3bFhWyGKvbYWEWmSr7w0DLH8/X7pi1u8IMSqeRll7tDJrEXeaw==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.2.3.tgz",
+      "integrity": "sha512-IgvGUTLQfTCUBv8k+lRk6Wq550W/g+N1vDUHLw1iAfvvqTf5ZQYG54tDa2ad0wPj+yDIJrL0GwKVXsFnb5o1PA==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5727,13 +5727,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.2.5.tgz",
-      "integrity": "sha512-YRS60tyZH79FfH9NEOndGVG/AmlXdYMd3nT2XfMBPZ+uTay/hcUzp6/wVsL+ucyVXi0avHbyNjY+iFP6m/MhRw==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.2.3.tgz",
+      "integrity": "sha512-AOIxOLxq0I8gp9du8K5w+5ohNwShcTBNxKnwdKel+iOP+mjB0ygVV4cfVa/Z3q1IqW/fMiA+YtRElLkxZaWRoQ==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -5744,26 +5744,26 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.2.5.tgz",
-      "integrity": "sha512-XqjJxpXjTKurL81QF+Xa69J/8TSstXvLWVqeX+132C0//Yq3VeUir87hvI2qw/qbQT9sGeRX72vqKhoxS+kvIQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.2.3.tgz",
+      "integrity": "sha512-kRnisYanm+ylch06paBgaIfkaTHeeORra64acGULefDuCpexM9eSakP9lupCNBYS1Q/PaURnoih3IcrWjFhQGQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.2.5.tgz",
-      "integrity": "sha512-QH2A+rzoMf8dcREOUpAsx1vvP7w3MQ8HbZCawk7KdkW/KS0L8zhkHfsNL9cfLcgCJA0wtOmRPD25ZVGoxUAHSA==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.2.3.tgz",
+      "integrity": "sha512-JqR0GNfHC/vq2hsi1UwXI/LHT07BouT2Z6/b+FjKoGZIEs/XiV1Mn58FS6dCAwzgF96TWipDo5J6mJF99BjZQQ==",
       "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"
@@ -5773,13 +5773,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.2.5.tgz",
-      "integrity": "sha512-SJXo9NxgdXEeFA4OgfMaffjOxFBrMFIq/27F6/Z+JEs6lHZhayaBsofFcVbKEtivsg9+MbOLnN1TbwgnjjRw5g==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.2.3.tgz",
+      "integrity": "sha512-izbyT+6bV2/0dApRh97kJZWEwXKTMIU6zmvI8bD4Ii/cWtd2c8KchKM4s00t11kaCg5yuaqGL60MRs/YT/QHQw==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
@@ -5804,7 +5804,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5816,12 +5816,12 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.2.5.tgz",
-      "integrity": "sha512-5CiJY+vJKt8FpEK0MVAXrIj4UDahi4fxPoUYcxawaYHTCpspaxFtLrHuNQkDbyDSjBednIMOIAm8ei2pha3Z6Q==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.2.3.tgz",
+      "integrity": "sha512-EGjs3bjvRCmXofC8etbXbhAb+7ahG3c4kmo/wxCeTZPEbPy4WNn4SSoZyxpNDv3OIYGdWQ+SJsjaNCqqPVy1DA==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf-plugin": "8.2.5",
+        "@storybook/csf-plugin": "8.2.3",
         "@types/find-cache-dir": "^3.2.1",
         "browser-assert": "^1.2.1",
         "es-module-lexer": "^1.5.0",
@@ -5837,7 +5837,7 @@
       },
       "peerDependencies": {
         "@preact/preset-vite": "*",
-        "storybook": "^8.2.5",
+        "storybook": "^8.2.3",
         "typescript": ">= 4.3.x",
         "vite": "^4.0.0 || ^5.0.0",
         "vite-plugin-glimmerx": "*"
@@ -5855,15 +5855,15 @@
       }
     },
     "node_modules/@storybook/codemod": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.5.tgz",
-      "integrity": "sha512-bUCvOqW3LUjz6epmTfocWBm0S7Ae52xmHvhVqgAUsKp9bVw2CGt9uaPR8dVE4IfI1yJZKRjf3u7Y60OTfWew4g==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.3.tgz",
+      "integrity": "sha512-mAc22OJthMr1oaGVKRbO05sveTUhcWhdgN4nQKf7wLfXjW73mMgrblao+mxiWIfhXIjbOB5xgw3Csi9pcy6Kkw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.24.4",
         "@babel/preset-env": "^7.24.4",
         "@babel/types": "^7.24.0",
-        "@storybook/core": "8.2.5",
+        "@storybook/core": "8.2.3",
         "@storybook/csf": "0.1.11",
         "@types/cross-spawn": "^6.0.2",
         "cross-spawn": "^7.0.3",
@@ -5923,23 +5923,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@storybook/components": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.2.5.tgz",
-      "integrity": "sha512-/cqAzQ1w9tK44BvKDNkY3MxcqoDaMvZeI5c4rGh/nYMjulXV4cAOTSlVK07XfkOJENj/wHHSDz8tZTrl2FhmuQ==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.5"
-      }
-    },
     "node_modules/@storybook/core": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.2.5.tgz",
-      "integrity": "sha512-KjaeIkbdcog4Jmx3MoSjQZpfESin1qHEcFiLoOkICOpuKsj37xdMFcuSre8IbcVGCJPkt1RvEmfeu1N90jOgww==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.2.3.tgz",
+      "integrity": "sha512-6CV6P8ES7E+vQZEuJTdLhgC3Lo7iRy+tpc/3przT25EStzNTR3TW2X31KUn7BfY2fuxCFPzftPaSJ/LEi7zHqg==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
@@ -5960,9 +5947,9 @@
       }
     },
     "node_modules/@storybook/core/node_modules/@types/node": {
-      "version": "18.19.41",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.41.tgz",
-      "integrity": "sha512-LX84pRJ+evD2e2nrgYCHObGWkiQJ1mL+meAgbvnwk/US6vmMY7S2ygBTGV2Jw91s9vUsLSXeDEkUHZIJGLrhsg==",
+      "version": "18.19.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.40.tgz",
+      "integrity": "sha512-MIxieZHrm4Ee8XArBIc+Or9HINt2StOmCbgRcXGSJl8q14svRvkZPe7LJq9HKtTI1SK3wU8b91TjntUm7T69Pg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -5978,9 +5965,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.2.5.tgz",
-      "integrity": "sha512-YpkvfDbKyilI54QMz/NyHGOlXxVeE+3LTKLx4GV/JrnGW+EtqQTYNaWWnTsesX0AsUICBAvxqyO9HtFtRjeL+Q==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.2.3.tgz",
+      "integrity": "sha512-j6w9hD/Ze4utK4Hg5ILKsgGkN4QwYaCo67vKsyUB78Y1v7WiWQIM6UsuOVwXGL1SpAtF5NDtu/92/jAJ094zqw==",
       "dev": true,
       "dependencies": {
         "unplugin": "^1.3.1"
@@ -5990,7 +5977,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/global": {
@@ -6013,9 +6000,9 @@
       }
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.2.5.tgz",
-      "integrity": "sha512-HeETFUYYZDM3A76oO8p7V1nCrxdAglhO+3FtPa2EqSWueYISANyOOTu/8NIW3EbKP3GsfWi509ofQhsLBHy9dQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.2.3.tgz",
+      "integrity": "sha512-LXG4Qvq2CMpoFr1OwstvfPZ/UwAQeT3mdqiW478QQ00RcYUUSfftts6D33+zZFG3LrZr+yy8eTZ/sov/rVAWZA==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -6027,47 +6014,17 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
-      }
-    },
-    "node_modules/@storybook/manager-api": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.2.5.tgz",
-      "integrity": "sha512-4UHRlpcbYF2UiO9tonafnJMC2wJXWjTXivHjuf3ehbJXmopkNe/4zLtNTRyf3Hozf4CuYtNotw0tXflBrGlIlw==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.5"
-      }
-    },
-    "node_modules/@storybook/preview-api": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.2.5.tgz",
-      "integrity": "sha512-C5A3MtubUM5Tq1An1gIqiEmiBX4ybaTzAeBuohsqToPmWHvM2uIdSl6XpTyQQJowkvrqBKjchqZUy/2mynX4lQ==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/react": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.2.5.tgz",
-      "integrity": "sha512-Wgr7a8ZHSDIJyKNDEYdwwu+AEkaG1yM7UBBmROr8WrYHgKaC49ekEgY0i3bck6HArUvu3A6Z448mJTMY+XtK5Q==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.2.3.tgz",
+      "integrity": "sha512-818F6pJWFBiwG0r6DiUVrV+qndwbIso2gtgJoituBgIJO2eIzNmkPNSsckbaR7u+FpE4dWiIIhmDVZSnRwvDlA==",
       "dev": true,
       "dependencies": {
-        "@storybook/components": "^8.2.5",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "^8.2.5",
-        "@storybook/preview-api": "^8.2.5",
-        "@storybook/react-dom-shim": "8.2.5",
-        "@storybook/theming": "^8.2.5",
+        "@storybook/react-dom-shim": "8.2.3",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^18.0.0",
@@ -6094,7 +6051,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.5",
+        "storybook": "^8.2.3",
         "typescript": ">= 4.2.x"
       },
       "peerDependenciesMeta": {
@@ -6104,9 +6061,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.2.5.tgz",
-      "integrity": "sha512-r+ZppgZR1AmM+2E9GRIaL/JjD3C/kl8sexD1mrGN4PBzrqqy6BNedHroWvf9JmfAvD/bp55peJ+LWAsSU/NvQQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.2.3.tgz",
+      "integrity": "sha512-N8AsM6N1S867GGWt2J2q5oY5ryqxohh3y1HqNtjg+wXf5+RkTD6M2Cgqe6p+JHz81nDKyvvVzP60MvvDhY5VOA==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -6115,19 +6072,19 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.2.5.tgz",
-      "integrity": "sha512-6Y4SdCfX0fvOVRJygFXrohiGQyEw2ByKqhQ/3Mw/jX2nIbauKWrGi56g7l8DBbaUJ122gN44xBsz+5KGCH8UGQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.2.3.tgz",
+      "integrity": "sha512-a7HKCu/rd7GyzG1sr0W13gaOC1kEzJfGxI+Nb8RrH5+yRH5atYEsiBD80hdJNbOGdgp4LInBHZKiq0xE8VJ8xQ==",
       "dev": true,
       "dependencies": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "8.2.5",
-        "@storybook/react": "8.2.5",
+        "@storybook/builder-vite": "8.2.3",
+        "@storybook/react": "8.2.3",
         "find-up": "^5.0.0",
         "magic-string": "^0.30.0",
         "react-docgen": "^7.0.0",
@@ -6144,7 +6101,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.2.5",
+        "storybook": "^8.2.3",
         "vite": "^4.0.0 || ^5.0.0"
       }
     },
@@ -6176,13 +6133,13 @@
       }
     },
     "node_modules/@storybook/test": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.5.tgz",
-      "integrity": "sha512-8fo5qh3dNTlcUsnpYB5klcsnjIhEpkyVC+KCqapDI/iFD6qDmZXzbEcP/HsVMICwGTanr2kFCmf5c8kfAiOMew==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.3.tgz",
+      "integrity": "sha512-vDvDNZzqupf+p5RHOzFaBEYjp2dBnUeXO8cjtwK7nkOJUmrnP2g+aYfCYIJXsnK+iOjOhrGVGZiqR/gW8R669w==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "0.1.11",
-        "@storybook/instrumenter": "8.2.5",
+        "@storybook/instrumenter": "8.2.3",
         "@testing-library/dom": "10.1.0",
         "@testing-library/jest-dom": "6.4.5",
         "@testing-library/user-event": "14.5.2",
@@ -6195,7 +6152,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.5"
+        "storybook": "^8.2.3"
       }
     },
     "node_modules/@storybook/test-runner": {
@@ -6234,6 +6191,56 @@
         "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/codemod": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.4.tgz",
+      "integrity": "sha512-QcZdqjX4NvkVcWR3yI9it3PfqmBOCR+3iY6j4PmG7p5IE0j9kXMKBbeFrBRprSijHKlwcjbc3bRx2SnKF6AFEg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.24.4",
+        "@babel/types": "^7.24.0",
+        "@storybook/core": "8.2.4",
+        "@storybook/csf": "0.1.11",
+        "@types/cross-spawn": "^6.0.2",
+        "cross-spawn": "^7.0.3",
+        "globby": "^14.0.1",
+        "jscodeshift": "^0.15.1",
+        "lodash": "^4.17.21",
+        "prettier": "^3.1.1",
+        "recast": "^0.23.5",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/core": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.2.4.tgz",
+      "integrity": "sha512-jePmsGZT2hhUNQs8ED6+hFVt2m4hrMseO8kkN7Mcsve1MIujzHUS7Gjo4uguBwHJJOtiXB2fw4OSiQCmsXscZA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@storybook/csf": "0.1.11",
+        "@types/express": "^4.17.21",
+        "@types/node": "^18.0.0",
+        "browser-assert": "^1.2.1",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0",
+        "esbuild-register": "^3.5.0",
+        "express": "^4.19.2",
+        "process": "^0.11.10",
+        "recast": "^0.23.5",
+        "util": "^0.12.4",
+        "ws": "^8.2.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/test-runner/node_modules/@storybook/core-common": {
       "version": "8.2.4",
       "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-8.2.4.tgz",
@@ -6260,6 +6267,201 @@
         "storybook": "^8.2.4"
       }
     },
+    "node_modules/@storybook/test-runner/node_modules/@storybook/preview-api": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.2.4.tgz",
+      "integrity": "sha512-IxOiUYYzNnk1OOz3zQBhsa3P1fsgqeMBZcH7TjiQWs9osuWG20oqsFR6+Z3dxoW8IuQHvpnREGKvAbRsDsThcA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.4"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/@types/node": {
+      "version": "18.19.40",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.40.tgz",
+      "integrity": "sha512-MIxieZHrm4Ee8XArBIc+Or9HINt2StOmCbgRcXGSJl8q14svRvkZPe7LJq9HKtTI1SK3wU8b91TjntUm7T69Pg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/globby": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
+      "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.2",
+        "ignore": "^5.2.4",
+        "path-type": "^5.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/path-type": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
+      "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/storybook": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.4.tgz",
+      "integrity": "sha512-ASavW8vIHiWpFY+4M6ngeqK5oL4OkxqdpmQYxvRqH0gA1G1hfq/vmDw4YC4GnqKwyWPQh2kaV5JFurKZVaeaDQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/types": "^7.24.0",
+        "@storybook/codemod": "8.2.4",
+        "@storybook/core": "8.2.4",
+        "@types/semver": "^7.3.4",
+        "@yarnpkg/fslib": "2.10.3",
+        "@yarnpkg/libzip": "2.3.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.1",
+        "cross-spawn": "^7.0.3",
+        "detect-indent": "^6.1.0",
+        "envinfo": "^7.7.3",
+        "execa": "^5.0.0",
+        "fd-package-json": "^1.2.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "giget": "^1.0.0",
+        "globby": "^14.0.1",
+        "jscodeshift": "^0.15.1",
+        "leven": "^3.1.0",
+        "ora": "^5.4.1",
+        "prettier": "^3.1.1",
+        "prompts": "^2.4.0",
+        "semver": "^7.3.7",
+        "strip-json-comments": "^3.0.1",
+        "tempy": "^3.1.0",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "bin": {
+        "getstorybook": "bin/index.cjs",
+        "sb": "bin/index.cjs",
+        "storybook": "bin/index.cjs"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test-runner/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@storybook/test/node_modules/@testing-library/dom": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
@@ -6331,19 +6533,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@storybook/theming": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.2.5.tgz",
-      "integrity": "sha512-EEOSmW55MeLB3iskf5uUqffsqu003tTta8XQ1Xg8em3gePxPsjqzQtly1Ws5PtRg1Zvt1Zc6NKHwabiVzxothA==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.5"
-      }
-    },
     "node_modules/@swc/core": {
       "version": "1.6.13",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.6.13.tgz",
@@ -17705,15 +17894,15 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.5.tgz",
-      "integrity": "sha512-nfcly5CY3D6KuHbsfhScPaGeraRA9EJhO9GF00/dnI0GXW4ILS8Kwket515IkKAuKcdjdZis6maEuosbG//Kbg==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.3.tgz",
+      "integrity": "sha512-uGjoFasTDWaeLp+pz8jCdKfSOvBTNEBpGf2C+pwZkJpd5CHrUlq4dkfE0/Kv/MtyQI1W9Fgbinbj7ggNe0D3Cg==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.24.4",
         "@babel/types": "^7.24.0",
-        "@storybook/codemod": "8.2.5",
-        "@storybook/core": "8.2.5",
+        "@storybook/codemod": "8.2.3",
+        "@storybook/core": "8.2.3",
         "@types/semver": "^7.3.4",
         "@yarnpkg/fslib": "2.10.3",
         "@yarnpkg/libzip": "2.3.0",
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 823c5072..11651979 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -37,14 +37,14 @@
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
-    "@storybook/addon-a11y": "8.2.5",
-    "@storybook/addon-essentials": "8.2.5",
-    "@storybook/addon-interactions": "8.2.5",
-    "@storybook/addon-links": "8.2.5",
-    "@storybook/blocks": "8.2.5",
-    "@storybook/react": "8.2.5",
-    "@storybook/react-vite": "8.2.5",
-    "@storybook/test": "8.2.5",
+    "@storybook/addon-a11y": "8.2.3",
+    "@storybook/addon-essentials": "8.2.3",
+    "@storybook/addon-interactions": "8.2.3",
+    "@storybook/addon-links": "8.2.3",
+    "@storybook/blocks": "8.2.3",
+    "@storybook/react": "8.2.3",
+    "@storybook/react-vite": "8.2.3",
+    "@storybook/test": "8.2.3",
     "@storybook/test-runner": "0.19.1",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "16.0.0",
@@ -66,7 +66,7 @@
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "8.2.5",
+    "storybook": "8.2.3",
     "ts-jest": "29.1.4",
     "ts-node": "10.9.2",
     "tslib": "2.6.2",

From ffe39451372c29a2236297d0dbf2b45e5717bc16 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 12:44:53 -0700
Subject: [PATCH 43/45] simplify styling of required label

---
 .../react-components/src/components/TextArea/TextArea.css   | 2 +-
 .../react-components/src/components/TextArea/TextArea.tsx   | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css
index 20218555..380b2b44 100644
--- a/packages/react-components/src/components/TextArea/TextArea.css
+++ b/packages/react-components/src/components/TextArea/TextArea.css
@@ -13,7 +13,7 @@
   color: var(--typography-color-primary);
 }
 
-.bcds-react-aria-TextArea--Label .required {
+.bcds-react-aria-TextArea--Label > .required {
   color: var(--typography-color-secondary);
   padding: var(--layout-padding-none) var(--layout-padding-xsmall);
 }
diff --git a/packages/react-components/src/components/TextArea/TextArea.tsx b/packages/react-components/src/components/TextArea/TextArea.tsx
index c7388f54..e7106bb9 100644
--- a/packages/react-components/src/components/TextArea/TextArea.tsx
+++ b/packages/react-components/src/components/TextArea/TextArea.tsx
@@ -45,11 +45,7 @@ export default function TextArea({
           {label && (
             <Label className="bcds-react-aria-TextArea--Label">
               {label}
-              {isRequired && (
-                <span className="bcds-react-aria-TextArea--Label required">
-                  (required)
-                </span>
-              )}
+              {isRequired && <span className="required">(required)</span>}
             </Label>
           )}
           <div className="bcds-react-aria-TextArea--Container">

From 3bbe4191673f67eb26244096c4e8a77d27f12915 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:26:56 -0700
Subject: [PATCH 44/45] remove hardcoded IDs from SVG

---
 packages/react-components/src/assets/icon-exclamation.svg      | 1 -
 .../src/components/SvgExclamationIcon/SvgExclamationIcon.tsx   | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-components/src/assets/icon-exclamation.svg b/packages/react-components/src/assets/icon-exclamation.svg
index b014cc3e..1b948c7b 100644
--- a/packages/react-components/src/assets/icon-exclamation.svg
+++ b/packages/react-components/src/assets/icon-exclamation.svg
@@ -6,7 +6,6 @@
   >
     <g>
       <path
-        id="20px/Exclamation icon"
         d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
         fill="currentColor"
       />
diff --git a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
index 00bc296c..193e112a 100644
--- a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
+++ b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
@@ -8,9 +8,8 @@ export default function SvgExclamationIcon({ id = "Exclamation icon" }) {
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g id="20px/Exclamation icon">
+      <g>
         <path
-          id="Icon"
           d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
           fill="currentColor"
         />

From cbe0370c75e09322f59be838a08390d84fdc9cc9 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:33:32 -0700
Subject: [PATCH 45/45] update default SVG ID

---
 .../src/components/SvgExclamationIcon/SvgExclamationIcon.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
index 193e112a..8ce1bfa4 100644
--- a/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
+++ b/packages/react-components/src/components/SvgExclamationIcon/SvgExclamationIcon.tsx
@@ -1,5 +1,5 @@
 // This icon is available as a plain SVG at src/assets/icon-exclamation.svg
-export default function SvgExclamationIcon({ id = "Exclamation icon" }) {
+export default function SvgExclamationIcon({ id = "exclamation-icon" }) {
   return (
     <svg
       id={id}