From c480ff92b2a03a0cacb77e5d17d217a70b4888eb Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Mon, 19 Aug 2024 09:36:35 -0500
Subject: [PATCH 01/10] feat(react): create init FileUploader API

---
 .../react/src/components/FileUploader.tsx     | 77 +++++++++++++++++++
 packages/react/src/index.ts                   |  1 +
 2 files changed, 78 insertions(+)
 create mode 100644 packages/react/src/components/FileUploader.tsx

diff --git a/packages/react/src/components/FileUploader.tsx b/packages/react/src/components/FileUploader.tsx
new file mode 100644
index 00000000..eeb8fe4b
--- /dev/null
+++ b/packages/react/src/components/FileUploader.tsx
@@ -0,0 +1,77 @@
+import { css, cx } from '@cerberus-design/styled-system/css'
+import { cq, vstack } from '@cerberus-design/styled-system/patterns'
+import type { InputHTMLAttributes, PropsWithChildren } from 'react'
+import { Show } from './Show'
+
+export interface FileUploaderProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  heading?: string
+  name: string
+}
+
+export function FileUploader(props: PropsWithChildren<FileUploaderProps>) {
+  return (
+    <div
+      className={cq({
+        border: '1px dashed',
+        borderColor: 'page.border.100',
+        bgColor: 'page.surface.100',
+        rounded: 'md',
+      })}
+    >
+      <label
+        className={vstack({
+          gap: '1',
+          justify: 'center',
+          position: 'relative',
+          textStyle: 'label-sm',
+          userSelect: 'none',
+        })}
+        htmlFor={props.name}
+      >
+        <Show when={Boolean(props.heading)}>
+          <p
+            className={css({
+              pt: '2',
+              textStyle: 'h6',
+            })}
+          >
+            {props.heading}
+          </p>
+        </Show>
+        {props.children}
+
+        <p
+          className={css({
+            textStyle: 'label-sm',
+          })}
+        >
+          Or{' '}
+          <span
+            className={css({
+              textStyle: 'link',
+            })}
+          >
+            Click to upload
+          </span>
+        </p>
+
+        <input
+          {...props}
+          className={cx(
+            props.className,
+            css({
+              bottom: '0',
+              left: '0',
+              opacity: '0',
+              position: 'absolute',
+              right: '0',
+              top: '0',
+            }),
+          )}
+          type="file"
+        />
+      </label>
+    </div>
+  )
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 9a1dbe9c..e58de6ce 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -8,6 +8,7 @@
 export * from './components/Button'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/FileUploader'
 export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'

From 006a22559f1df4c421e252b21502f2d267bb3be9 Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Mon, 19 Aug 2024 10:29:36 -0500
Subject: [PATCH 02/10] docs: add File Uploader section

---
 docs/app/data/categories.json                 |   2 +-
 docs/app/react/file-uploader/a11y.mdx         |  32 +++++
 .../components/file-uploader-preview.tsx      |   9 ++
 .../components/label-preview.tsx              |  61 ++++++++
 docs/app/react/file-uploader/dev.mdx          | 133 ++++++++++++++++++
 docs/app/react/file-uploader/guidelines.mdx   |  49 +++++++
 docs/app/react/file-uploader/overview.mdx     |  27 ++++
 docs/app/react/file-uploader/page.tsx         |  54 +++++++
 docs/app/react/side-nav.json                  |   7 +
 .../react/src/components/FileUploader.tsx     |  33 +++--
 10 files changed, 393 insertions(+), 14 deletions(-)
 create mode 100644 docs/app/react/file-uploader/a11y.mdx
 create mode 100644 docs/app/react/file-uploader/components/file-uploader-preview.tsx
 create mode 100644 docs/app/react/file-uploader/components/label-preview.tsx
 create mode 100644 docs/app/react/file-uploader/dev.mdx
 create mode 100644 docs/app/react/file-uploader/guidelines.mdx
 create mode 100644 docs/app/react/file-uploader/overview.mdx
 create mode 100644 docs/app/react/file-uploader/page.tsx

diff --git a/docs/app/data/categories.json b/docs/app/data/categories.json
index 241185bf..a5e3c583 100644
--- a/docs/app/data/categories.json
+++ b/docs/app/data/categories.json
@@ -27,6 +27,6 @@
   "inputs": {
     "name": "Inputs",
     "description": "Components that allow users to input data.",
-    "items": ["Input", "Textarea"]
+    "items": ["Input", "Textarea", "File Uploader"]
   }
 }
diff --git a/docs/app/react/file-uploader/a11y.mdx b/docs/app/react/file-uploader/a11y.mdx
new file mode 100644
index 00000000..1486256c
--- /dev/null
+++ b/docs/app/react/file-uploader/a11y.mdx
@@ -0,0 +1,32 @@
+---
+---
+
+import {
+  WhenToUseAdmonition
+} from '@/app/components/Admonition'
+import OverviewList from '@/app/components/OverviewList'
+
+## Use Cases
+
+<OverviewList intro="Users should be able to:" rules={[
+  'Navigate to and activate a text field with assistive technology',
+  'Input information into the text field',
+  'Receive and understand supporting text and error messages',
+  'Navigate to and select interactive icons',
+]} />
+
+## Interaction &amp; Style
+
+The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.
+
+## Keyboard Navigation
+
+| Keys     | Actions                                                         |
+| -------- | --------------------------------------------------------------- |
+| Tab      | Focus lands on (non-disabled) input       |
+
+## Labeling Elements
+
+If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
+
+The accessibility label for a textfield is typically the same as the label for the textfield.
\ No newline at end of file
diff --git a/docs/app/react/file-uploader/components/file-uploader-preview.tsx b/docs/app/react/file-uploader/components/file-uploader-preview.tsx
new file mode 100644
index 00000000..38cc163e
--- /dev/null
+++ b/docs/app/react/file-uploader/components/file-uploader-preview.tsx
@@ -0,0 +1,9 @@
+import { FileUploader } from '@cerberus-design/react'
+
+export function BasicFileUploader() {
+  return (
+    <FileUploader heading="Upload Files" name="basic-example">
+      Import .csv file
+    </FileUploader>
+  )
+}
diff --git a/docs/app/react/file-uploader/components/label-preview.tsx b/docs/app/react/file-uploader/components/label-preview.tsx
new file mode 100644
index 00000000..0e264ede
--- /dev/null
+++ b/docs/app/react/file-uploader/components/label-preview.tsx
@@ -0,0 +1,61 @@
+import { Field, Input, Label } from '@cerberus-design/react'
+import { css } from '@cerberus/styled-system/css'
+
+const overrideStyles = css({
+  w: '1/2',
+})
+
+export function LabelBasicPreview() {
+  return (
+    <div className={overrideStyles}>
+      <Field required>
+        <Label htmlFor="first_name">First Name</Label>
+        <Input id="first_name" placeholder="Type your first name" type="text" />
+      </Field>
+    </div>
+  )
+}
+
+export function LabelHiddenPreview() {
+  return (
+    <div className={overrideStyles}>
+      <Field required>
+        <Label htmlFor="global_search" hidden>
+          Search anything
+        </Label>
+        <Input id="global_search" placeholder="Search anything" type="text" />
+      </Field>
+    </div>
+  )
+}
+
+export function LabelOptionalPreview() {
+  return (
+    <div className={overrideStyles}>
+      <Field>
+        <Label htmlFor="preferred">Preferred Name</Label>
+        <Input id="preferred" placeholder="i.e. Johnny" type="text" />
+      </Field>
+    </div>
+  )
+}
+
+export function LabelCustomPreview() {
+  return (
+    <div className={overrideStyles}>
+      <Field required>
+        <Label
+          className={css({
+            fontSize: '2rem',
+            bgColor: 'black',
+            color: 'yellow',
+          })}
+          htmlFor="global_search"
+        >
+          Killa Bees
+        </Label>
+        <Input id="global_search" type="text" />
+      </Field>
+    </div>
+  )
+}
diff --git a/docs/app/react/file-uploader/dev.mdx b/docs/app/react/file-uploader/dev.mdx
new file mode 100644
index 00000000..1e5c37a1
--- /dev/null
+++ b/docs/app/react/file-uploader/dev.mdx
@@ -0,0 +1,133 @@
+---
+npm: '@cerberus-design/react'
+source: 'components/Label.tsx'
+recipe: 'label.ts'
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import {
+  LabelBasicPreview,
+  LabelHiddenPreview,
+  LabelOptionalPreview,
+  LabelCustomPreview
+} from '@/app/react/label/components/label-preview'
+import { NoteAdmonition } from '@/app/components/Admonition'
+
+```ts
+import { Field, Label } from '@cerberus-design/react'
+```
+
+## Usage
+
+<CodePreview preview={<LabelBasicPreview />}>
+```tsx title="first-name-input.tsx" {5,6}
+import { Field, Label } from '@cerberus-design/react'
+
+function LabelBasicPreview() {
+  return (
+    <Field required>
+      <Label htmlFor="first_name">First Name</Label>
+      <Input id="first_name" placeholder="Type your first name" type="text" />
+    </Field>
+  )
+}
+```
+</CodePreview>
+
+## Hidden
+
+<CodePreview preview={<LabelHiddenPreview />}>
+```tsx title="search-input.tsx" {6}
+import { Field, Label } from '@cerberus-design/react'
+
+function LabelHiddenPreview() {
+  return (
+    <Field required>
+      <Label htmlFor="global_search" hidden>
+        Search anything
+      </Label>
+      <Input id="global_search" placeholder="Search anything" type="text" />
+    </Field>
+  )
+}
+```
+</CodePreview>
+
+## Optional
+
+<CodePreview preview={<LabelOptionalPreview />}>
+```tsx title="search-input.tsx" {5}
+import { Field, Label } from '@cerberus-design/react'
+
+function LabelOptionalPreview() {
+  return (
+    <Field>
+      <Label htmlFor="preferred">Preferred Name</Label>
+      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
+    </Field>
+  )
+}
+```
+</CodePreview>
+
+## Customizing
+
+<CodePreview preview={<LabelCustomPreview />}>
+```tsx title="search-input.tsx"
+import { Field, Label } from '@cerberus-design/react'
+
+function LabelCustomPreview() {
+  return (
+    <Field required>
+      <Label
+        className={css({
+          fontSize: '2rem',
+          bgColor: 'black',
+          color: 'yellow',
+        })}
+        htmlFor="global_search"
+      >
+        Killa Bees
+      </Label>
+      <input id="global_search" type="text" />
+    </Field>
+  )
+}
+
+```
+</CodePreview>
+
+## API
+
+<NoteAdmonition description="The Label component must be used within a Field provider." />
+
+```ts showLineNumbers=false
+export interface FieldProps {
+  disabled?: boolean
+  invalid?: boolean
+  required?: boolean
+  readOnly?: boolean
+}
+
+define function Field(props: PropsWithChildren<FieldProps>): ReactNode
+```
+
+```ts showLineNumbers=false
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  htmlFor: string
+  hidden?: boolean
+  size?: 'sm' | 'md'
+}
+
+define function Label(props: LabelProps): ReactNode
+```
+
+### Props
+
+The `LabelProps` component accepts the following props:
+
+| Name     | Default | Description                                                   |
+| -------- | ------- | ------------------------------------------------------------- |
+| htmlFor     | null   | The `name` attribute of the Input the Label is associated with. |
+| hidden   | false   | Whether the Label content should be visually hidden.                 |
+| size     | 'md'    | The size of the Label.         |
diff --git a/docs/app/react/file-uploader/guidelines.mdx b/docs/app/react/file-uploader/guidelines.mdx
new file mode 100644
index 00000000..a0d10658
--- /dev/null
+++ b/docs/app/react/file-uploader/guidelines.mdx
@@ -0,0 +1,49 @@
+---
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import OverviewList from '@/app/components/OverviewList'
+import {
+  WhenToUseAdmonition,
+  WhenNotToUseAdmonition,
+} from '@/app/components/Admonition'
+import {
+  LabelBasicPreview,
+  LabelHiddenPreview,
+  LabelOptionalPreview
+} from '@/app/react/label/components/label-preview'
+
+## Usage
+
+<WhenToUseAdmonition description="When you use an input in the UI, regardless if it has a visible label or not." />
+
+<WhenNotToUseAdmonition description="Labels should always accompany any type of input." />
+
+
+## Standard Labels
+
+Standard labels are used for most input use cases.
+
+<CodePreview preview={<LabelOptionalPreview />} />
+
+<WhenToUseAdmonition description="When you use any type of standard inputs within a form." />
+
+## Hidden Labels
+
+Hidden labels are used when the label is not visible to the user, but still needs to be present for screen readers.
+
+<CodePreview preview={<LabelHiddenPreview />} />
+
+<WhenToUseAdmonition description="When you need an input that doesn't use a visual label (i.e., global search input)" />
+
+## Required Labels
+
+Required labels are used when the input is required.
+
+<CodePreview preview={<LabelBasicPreview />} />
+
+<WhenToUseAdmonition description="When the input is required." />
+
+## Placement
+
+Labels should be placed above the input field. For checkboxes and radio buttons, the label should be placed to the right of the input.
diff --git a/docs/app/react/file-uploader/overview.mdx b/docs/app/react/file-uploader/overview.mdx
new file mode 100644
index 00000000..d5383a3f
--- /dev/null
+++ b/docs/app/react/file-uploader/overview.mdx
@@ -0,0 +1,27 @@
+---
+heading: 'File Uploader'
+description: 'File uploaders allow users to upload files to a server'
+a11y: 'forms'
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import OverviewList from '@/app/components/OverviewList'
+import {
+  BasicFileUploader
+} from '@/app/react/file-uploader/components/file-uploader-preview'
+
+<OverviewList rules={[
+  'Labels should be used to describe the file types that can be uploaded',
+  'The file uploader should have a clear call to action',
+  'Headings can be used to describe the file uploader',
+]} />
+
+## Example
+
+<CodePreview preview={<BasicFileUploader />} />
+
+## Resources
+
+| Name     | Resource | Status                                               |
+| -------- | -------- | ---------------------------------------------------- |
+| Figma    | [Design Kit (Figma)](https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?m=auto&node-id=0-1)      |                         Private                      |
\ No newline at end of file
diff --git a/docs/app/react/file-uploader/page.tsx b/docs/app/react/file-uploader/page.tsx
new file mode 100644
index 00000000..9f4d6074
--- /dev/null
+++ b/docs/app/react/file-uploader/page.tsx
@@ -0,0 +1,54 @@
+import ApiLinks from '@/app/components/ApiLinks'
+import {
+  TabPageContent,
+  TabPageContentLayout,
+} from '../../components/PageLayout'
+import FeatureHeader from '@/app/components/FeatureHeader'
+import type { MatchFeatureKind } from '@/app/components/MatchFeatureImg'
+import PageTabs from '@/app/components/PageTabs'
+
+import Overview, { frontmatter } from './overview.mdx'
+import Guidelines from './guidelines.mdx'
+import Dev, { frontmatter as devFrontmatter } from './dev.mdx'
+import A11y from './a11y.mdx'
+
+export default function FileUploaderPage() {
+  return (
+    <>
+      <TabPageContent>
+        <FeatureHeader
+          heading={frontmatter.heading}
+          description={frontmatter.description}
+          a11y={frontmatter.a11y as MatchFeatureKind}
+        />
+
+        <PageTabs
+          description="Tabs component details"
+          overview={
+            <TabPageContentLayout>
+              <Overview />
+            </TabPageContentLayout>
+          }
+          guidelines={
+            <TabPageContentLayout>
+              <Guidelines />
+            </TabPageContentLayout>
+          }
+          dev={
+            <TabPageContentLayout>
+              <main>
+                <ApiLinks {...devFrontmatter} />
+                <Dev />
+              </main>
+            </TabPageContentLayout>
+          }
+          a11y={
+            <TabPageContentLayout>
+              <A11y />
+            </TabPageContentLayout>
+          }
+        />
+      </TabPageContent>
+    </>
+  )
+}
diff --git a/docs/app/react/side-nav.json b/docs/app/react/side-nav.json
index 53b7e946..d4c3a8b5 100644
--- a/docs/app/react/side-nav.json
+++ b/docs/app/react/side-nav.json
@@ -142,6 +142,13 @@
     "tag": "new",
     "type": "route"
   },
+  {
+    "id": "2:s",
+    "label": "File Uploader",
+    "route": "/react/file-uploader",
+    "tag": "next",
+    "type": "route"
+  },
   {
     "id": "3",
     "label": "Hooks",
diff --git a/packages/react/src/components/FileUploader.tsx b/packages/react/src/components/FileUploader.tsx
index eeb8fe4b..8b3f5fbf 100644
--- a/packages/react/src/components/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@cerberus-design/styled-system/css'
-import { cq, vstack } from '@cerberus-design/styled-system/patterns'
+import { vstack } from '@cerberus-design/styled-system/patterns'
 import type { InputHTMLAttributes, PropsWithChildren } from 'react'
 import { Show } from './Show'
 
@@ -10,13 +10,18 @@ export interface FileUploaderProps
 }
 
 export function FileUploader(props: PropsWithChildren<FileUploaderProps>) {
+  const { children, ...nativeProps } = props
   return (
     <div
-      className={cq({
+      className={css({
         border: '1px dashed',
         borderColor: 'page.border.100',
         bgColor: 'page.surface.100',
+        minH: '14rem',
+        maxW: '36rem',
+        py: '6',
         rounded: 'md',
+        w: 'full',
       })}
     >
       <label
@@ -39,29 +44,31 @@ export function FileUploader(props: PropsWithChildren<FileUploaderProps>) {
             {props.heading}
           </p>
         </Show>
-        {props.children}
+        {children}
 
         <p
           className={css({
+            color: 'action.navigation.initial',
+            textDecoration: 'underline',
             textStyle: 'label-sm',
+            transitionProperty: 'color',
+            transitionDuration: '150ms',
+            _peerHover: {
+              color: 'action.navigation.hover',
+            },
           })}
         >
-          Or{' '}
-          <span
-            className={css({
-              textStyle: 'link',
-            })}
-          >
-            Click to upload
-          </span>
+          Or click to upload
         </p>
 
         <input
-          {...props}
+          {...nativeProps}
           className={cx(
-            props.className,
+            nativeProps.className,
+            'peer',
             css({
               bottom: '0',
+              cursor: 'pointer',
               left: '0',
               opacity: '0',
               position: 'absolute',

From 5b0d309b408532e663abe7673b23299163087267 Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Mon, 19 Aug 2024 10:31:11 -0500
Subject: [PATCH 03/10] chore: update dependabot.yml

---
 .github/dependabot.yml | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 7f17e5d8..dc2a865b 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -11,11 +11,16 @@ updates:
       interval: weekly
 
   - package-ecosystem: npm
-    directory: '/packages/panda-preset'
+    directory: '/packages/*'
     schedule:
       interval: weekly
 
   - package-ecosystem: npm
-    directory: '/packages/react'
+    directory: '/docs'
+    schedule:
+      interval: weekly
+
+  - package-ecosystem: npm
+    directory: '/figma'
     schedule:
       interval: weekly

From 150a6e349d028cd7691c54445130c2d75bdcd26a Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Mon, 19 Aug 2024 12:00:59 -0500
Subject: [PATCH 04/10] feat(preset): add fileUploader recipe

---
 .../components/file-uploader-preview.tsx      |  8 +-
 packages/panda-preset/src/recipes/index.ts    |  2 +
 .../src/recipes/slots/fileUploader.ts         | 71 ++++++++++++++++
 .../react/src/components/FileUploader.tsx     | 82 +++++--------------
 4 files changed, 100 insertions(+), 63 deletions(-)
 create mode 100644 packages/panda-preset/src/recipes/slots/fileUploader.ts

diff --git a/docs/app/react/file-uploader/components/file-uploader-preview.tsx b/docs/app/react/file-uploader/components/file-uploader-preview.tsx
index 38cc163e..424812b9 100644
--- a/docs/app/react/file-uploader/components/file-uploader-preview.tsx
+++ b/docs/app/react/file-uploader/components/file-uploader-preview.tsx
@@ -2,8 +2,10 @@ import { FileUploader } from '@cerberus-design/react'
 
 export function BasicFileUploader() {
   return (
-    <FileUploader heading="Upload Files" name="basic-example">
-      Import .csv file
-    </FileUploader>
+    <FileUploader
+      accept=".csv,.docx"
+      heading="Upload Files"
+      name="basic-example"
+    />
   )
 }
diff --git a/packages/panda-preset/src/recipes/index.ts b/packages/panda-preset/src/recipes/index.ts
index 3c1650b3..b3afa14e 100644
--- a/packages/panda-preset/src/recipes/index.ts
+++ b/packages/panda-preset/src/recipes/index.ts
@@ -5,6 +5,7 @@ import { label } from './label'
 import { modalIcon } from './modalIcon'
 import { tag } from './tag'
 
+import { fileUploader } from './slots/fileUploader'
 import { input } from './slots/input'
 import { modal } from './slots/modal'
 import { radio } from './slots/radio'
@@ -26,6 +27,7 @@ export const recipes = {
 }
 
 export const slotRecipes = {
+  fileUploader,
   input,
   modal,
   radio,
diff --git a/packages/panda-preset/src/recipes/slots/fileUploader.ts b/packages/panda-preset/src/recipes/slots/fileUploader.ts
new file mode 100644
index 00000000..99e27d12
--- /dev/null
+++ b/packages/panda-preset/src/recipes/slots/fileUploader.ts
@@ -0,0 +1,71 @@
+import { defineSlotRecipe, type SlotRecipeConfig } from '@pandacss/dev'
+import { modalIconBase } from '../shared/modal.base'
+
+/**
+ * This module contains the fileUploader recipe.
+ * @module
+ */
+
+/**
+ * Styles for the FileUploader components
+ * @definition [ARIA Dialog Modal](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
+ * @definition [File Uploader docs](https://cerberus.digitalu.design/react/file-uploader)
+ */
+export const fileUploader: Partial<SlotRecipeConfig> = defineSlotRecipe({
+  className: 'file-uploader',
+  description: 'The styles for FileUploader components',
+  slots: ['container', 'label', 'icon', 'heading', 'description', 'input'],
+  jsx: ['ConfirmModal', 'PromptModal'],
+
+  base: {
+    container: {
+      // combine with vstack
+      borderColor: 'page.border.100',
+      borderStyle: 'dashed',
+      borderWidth: '2.5px',
+      bgColor: 'page.surface.100',
+      justify: 'center',
+      minH: '14rem',
+      maxW: '36rem',
+      py: '6',
+      rounded: 'md',
+      transitionProperty: 'background-color, border',
+      transitionDuration: '150ms',
+      transitionTimingFunction: 'ease-in-out',
+      w: 'full',
+      _hover: {
+        borderColor: 'action.border.focus',
+        bgColor: 'action.ghost.hover',
+      },
+    },
+    label: {
+      // combine with vstack
+      gap: '1',
+      justify: 'center',
+      position: 'relative',
+      textStyle: 'label-sm',
+      userSelect: 'none',
+    },
+    icon: modalIconBase,
+    heading: {
+      pt: '2',
+      textStyle: 'h6',
+    },
+    description: {
+      color: 'action.navigation.initial',
+      textDecoration: 'underline',
+      textStyle: 'label-sm',
+      transitionProperty: 'color',
+      transitionDuration: '150ms',
+    },
+    input: {
+      bottom: '0',
+      cursor: 'pointer',
+      left: '0',
+      opacity: '0',
+      position: 'absolute',
+      right: '0',
+      top: '0',
+    },
+  },
+})
diff --git a/packages/react/src/components/FileUploader.tsx b/packages/react/src/components/FileUploader.tsx
index 8b3f5fbf..fd0b75b3 100644
--- a/packages/react/src/components/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader.tsx
@@ -1,7 +1,8 @@
-import { css, cx } from '@cerberus-design/styled-system/css'
+import { cx } from '@cerberus-design/styled-system/css'
 import { vstack } from '@cerberus-design/styled-system/patterns'
-import type { InputHTMLAttributes, PropsWithChildren } from 'react'
+import type { InputHTMLAttributes } from 'react'
 import { Show } from './Show'
+import { fileUploader } from '@cerberus-design/styled-system/recipes'
 
 export interface FileUploaderProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -9,73 +10,34 @@ export interface FileUploaderProps
   name: string
 }
 
-export function FileUploader(props: PropsWithChildren<FileUploaderProps>) {
-  const { children, ...nativeProps } = props
+export function FileUploader(props: FileUploaderProps) {
+  const styles = fileUploader()
   return (
     <div
-      className={css({
-        border: '1px dashed',
-        borderColor: 'page.border.100',
-        bgColor: 'page.surface.100',
-        minH: '14rem',
-        maxW: '36rem',
-        py: '6',
-        rounded: 'md',
-        w: 'full',
-      })}
+      className={cx(
+        vstack({
+          justify: 'center',
+        }),
+        styles.container,
+      )}
     >
       <label
-        className={vstack({
-          gap: '1',
-          justify: 'center',
-          position: 'relative',
-          textStyle: 'label-sm',
-          userSelect: 'none',
-        })}
+        className={cx(
+          vstack({
+            justify: 'center',
+          }),
+          styles.label,
+        )}
         htmlFor={props.name}
       >
         <Show when={Boolean(props.heading)}>
-          <p
-            className={css({
-              pt: '2',
-              textStyle: 'h6',
-            })}
-          >
-            {props.heading}
-          </p>
+          <p className={styles.heading}>{props.heading}</p>
         </Show>
-        {children}
-
-        <p
-          className={css({
-            color: 'action.navigation.initial',
-            textDecoration: 'underline',
-            textStyle: 'label-sm',
-            transitionProperty: 'color',
-            transitionDuration: '150ms',
-            _peerHover: {
-              color: 'action.navigation.hover',
-            },
-          })}
-        >
-          Or click to upload
-        </p>
-
+        Import {props.accept?.replace(',', ', ')} files
+        <p className={styles.description}>Or click to upload</p>
         <input
-          {...nativeProps}
-          className={cx(
-            nativeProps.className,
-            'peer',
-            css({
-              bottom: '0',
-              cursor: 'pointer',
-              left: '0',
-              opacity: '0',
-              position: 'absolute',
-              right: '0',
-              top: '0',
-            }),
-          )}
+          {...props}
+          className={cx(props.className, styles.input)}
           type="file"
         />
       </label>

From 10f7ed16b7398194518c3ea8146044d2a3006553 Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Mon, 19 Aug 2024 12:17:46 -0500
Subject: [PATCH 05/10] test: add file uploader tests

---
 .../react/src/components/FileUploader.tsx     |  9 ++-
 .../recipes/slots/fileUploader.test.ts        | 68 +++++++++++++++++++
 tests/react/components/fileUploader.test.tsx  | 32 +++++++++
 3 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 tests/panda-preset/recipes/slots/fileUploader.test.ts
 create mode 100644 tests/react/components/fileUploader.test.tsx

diff --git a/packages/react/src/components/FileUploader.tsx b/packages/react/src/components/FileUploader.tsx
index fd0b75b3..d6474e4e 100644
--- a/packages/react/src/components/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader.tsx
@@ -1,8 +1,9 @@
 import { cx } from '@cerberus-design/styled-system/css'
-import { vstack } from '@cerberus-design/styled-system/patterns'
+import { circle, vstack } from '@cerberus-design/styled-system/patterns'
 import type { InputHTMLAttributes } from 'react'
 import { Show } from './Show'
-import { fileUploader } from '@cerberus-design/styled-system/recipes'
+import { fileUploader, modalIcon } from '@cerberus-design/styled-system/recipes'
+import { CloudUpload } from '@cerberus/icons'
 
 export interface FileUploaderProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -21,6 +22,10 @@ export function FileUploader(props: FileUploaderProps) {
         styles.container,
       )}
     >
+      <span className={cx(styles.icon, modalIcon(), circle())}>
+        <CloudUpload />
+      </span>
+
       <label
         className={cx(
           vstack({
diff --git a/tests/panda-preset/recipes/slots/fileUploader.test.ts b/tests/panda-preset/recipes/slots/fileUploader.test.ts
new file mode 100644
index 00000000..c251d850
--- /dev/null
+++ b/tests/panda-preset/recipes/slots/fileUploader.test.ts
@@ -0,0 +1,68 @@
+import { describe, test, expect } from 'bun:test'
+import { slotRecipes } from '@cerberus-design/panda-preset'
+
+describe('fileUploader recipe', () => {
+  const { fileUploader } = slotRecipes
+
+  test('should be exported', () => {
+    expect(fileUploader).toBeDefined()
+  })
+
+  test('should have a base style', () => {
+    expect(fileUploader.base?.container).toMatchObject({
+      borderColor: 'page.border.100',
+      borderStyle: 'dashed',
+      borderWidth: '2.5px',
+      bgColor: 'page.surface.100',
+      justify: 'center',
+      minH: '14rem',
+      maxW: '36rem',
+      py: '6',
+      rounded: 'md',
+      transitionProperty: 'background-color, border',
+      transitionDuration: '150ms',
+      transitionTimingFunction: 'ease-in-out',
+      w: 'full',
+      _hover: {
+        borderColor: 'action.border.focus',
+        bgColor: 'action.ghost.hover',
+      },
+    })
+  })
+
+  test('should have a icon style', () => {
+    expect(fileUploader.base?.icon).toMatchObject({
+      mxi: 'auto',
+      p: '2',
+    })
+  })
+
+  test('should have a heading style', () => {
+    expect(fileUploader.base?.heading).toMatchObject({
+      pt: '2',
+      textStyle: 'h6',
+    })
+  })
+
+  test('should have a description style', () => {
+    expect(fileUploader.base?.description).toMatchObject({
+      color: 'action.navigation.initial',
+      textDecoration: 'underline',
+      textStyle: 'label-sm',
+      transitionProperty: 'color',
+      transitionDuration: '150ms',
+    })
+  })
+
+  test('should have a input style', () => {
+    expect(fileUploader.base?.input).toMatchObject({
+      bottom: '0',
+      cursor: 'pointer',
+      left: '0',
+      opacity: '0',
+      position: 'absolute',
+      right: '0',
+      top: '0',
+    })
+  })
+})
diff --git a/tests/react/components/fileUploader.test.tsx b/tests/react/components/fileUploader.test.tsx
new file mode 100644
index 00000000..6fab6ee9
--- /dev/null
+++ b/tests/react/components/fileUploader.test.tsx
@@ -0,0 +1,32 @@
+import { describe, test, expect, afterEach } from 'bun:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { FileUploader } from '@cerberus-design/react'
+import { setupStrictMode } from '@/utils'
+
+describe('FileUploader', () => {
+  setupStrictMode()
+  afterEach(cleanup)
+
+  test('should render a file uploader', () => {
+    render(
+      <FileUploader
+        accept=".csv,.docx"
+        heading="Upload Files"
+        name="basic-example"
+      />,
+    )
+
+    expect(screen.getByText(/upload files/i)).toBeTruthy()
+    expect(screen.getByText(/import .csv, .docx files/i)).toBeTruthy()
+    expect(screen.getByText(/or click to upload/i)).toBeTruthy()
+    expect(screen.getByLabelText(/upload files/i)).toBeTruthy()
+  })
+
+  test('should render a file uploader with hidden heading', () => {
+    render(<FileUploader accept=".csv,.doc" name="no-heading" />)
+
+    expect(screen.queryByText(/upload files/i)).toBeNull()
+    expect(screen.getByText(/import .csv, .doc files/i)).toBeTruthy()
+    expect(screen.getByText(/or click to upload/i)).toBeTruthy()
+  })
+})

From 0ea3d13128cea4ae316bce1f38bc679f7992f52f Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Mon, 19 Aug 2024 12:21:23 -0500
Subject: [PATCH 06/10] feat(react): add fileUploader to cerbIcons

---
 packages/react/src/components/FileUploader.tsx | 6 ++++--
 packages/react/src/config/cerbIcons.ts         | 3 +++
 tests/react/helpers/config.test.ts             | 3 +++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/FileUploader.tsx b/packages/react/src/components/FileUploader.tsx
index d6474e4e..03be82cc 100644
--- a/packages/react/src/components/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader.tsx
@@ -3,7 +3,7 @@ import { circle, vstack } from '@cerberus-design/styled-system/patterns'
 import type { InputHTMLAttributes } from 'react'
 import { Show } from './Show'
 import { fileUploader, modalIcon } from '@cerberus-design/styled-system/recipes'
-import { CloudUpload } from '@cerberus/icons'
+import { $cerberusIcons } from '../config/defineIcons'
 
 export interface FileUploaderProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -13,6 +13,8 @@ export interface FileUploaderProps
 
 export function FileUploader(props: FileUploaderProps) {
   const styles = fileUploader()
+  const Icon = $cerberusIcons.fileUploader
+
   return (
     <div
       className={cx(
@@ -23,7 +25,7 @@ export function FileUploader(props: FileUploaderProps) {
       )}
     >
       <span className={cx(styles.icon, modalIcon(), circle())}>
-        <CloudUpload />
+        <Icon />
       </span>
 
       <label
diff --git a/packages/react/src/config/cerbIcons.ts b/packages/react/src/config/cerbIcons.ts
index e643440b..5839ddbc 100644
--- a/packages/react/src/config/cerbIcons.ts
+++ b/packages/react/src/config/cerbIcons.ts
@@ -1,5 +1,6 @@
 import {
   Checkmark,
+  CloudUpload,
   Information,
   WarningFilled,
   type CarbonIconType,
@@ -8,6 +9,7 @@ import type { ElementType } from 'react'
 
 export interface DefinedIcons {
   confirmModal?: CarbonIconType | ElementType
+  fileUploader?: CarbonIconType | ElementType
   promptModal?: CarbonIconType | ElementType
   invalid: CarbonIconType | ElementType
   toggleChecked?: CarbonIconType | ElementType
@@ -15,6 +17,7 @@ export interface DefinedIcons {
 
 export const defaultIcons: DefinedIcons = {
   confirmModal: Information,
+  fileUploader: CloudUpload,
   promptModal: Information,
   invalid: WarningFilled,
   toggleChecked: Checkmark,
diff --git a/tests/react/helpers/config.test.ts b/tests/react/helpers/config.test.ts
index f7a5bd6f..a0201843 100644
--- a/tests/react/helpers/config.test.ts
+++ b/tests/react/helpers/config.test.ts
@@ -6,12 +6,14 @@ import {
   CheckmarkFilled,
   Checkmark,
   Information,
+  CloudUpload,
 } from '@cerberus-design/icons'
 
 describe('defineIcons', () => {
   const defaultIcons = {
     confirmModal: Information,
     promptModal: Information,
+    fileUploader: CloudUpload,
     invalid: WarningFilled,
     toggleChecked: Checkmark,
   }
@@ -27,6 +29,7 @@ describe('defineIcons', () => {
   test('should define a custom set of icons', () => {
     const customIcons = defineIcons({
       confirmModal: Information,
+      fileUploader: CloudUpload,
       promptModal: Information,
       invalid: WarningAlt,
       toggleChecked: CheckmarkFilled,

From a0ccc26f3482c31c11f04d1c9fd0b0ee4bb0f83e Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Tue, 20 Aug 2024 15:28:05 -0500
Subject: [PATCH 07/10] docs: add file-uploader & DnD pages

---
 docs/app/preset/conditions/doc.mdx            |   2 +
 .../drag-n-drop/components/dnd-preview.tsx    |  61 +++++++++
 .../drag-n-drop/components/draggable.tsx      |  34 +++++
 docs/app/react/drag-n-drop/doc.mdx            |  98 +++++++++++++++
 docs/app/react/drag-n-drop/page.tsx           |  28 +++++
 docs/app/react/file-uploader/a11y.mdx         |  13 +-
 docs/app/react/file-uploader/dev.mdx          | 118 ++++--------------
 docs/app/react/file-uploader/guidelines.mdx   |  47 +++----
 docs/app/react/side-nav.json                  |   7 ++
 packages/panda-preset/src/conditions.ts       |   2 +
 .../src/recipes/slots/fileUploader.ts         |  16 ++-
 packages/react/package.json                   |   3 +
 packages/react/src/components/Droppable.tsx   |  33 +++++
 .../react/src/components/FileUploader.tsx     |   4 +-
 packages/react/src/index.ts                   |   5 +
 pnpm-lock.yaml                                | 107 ++++++++++------
 tests/panda-preset/conditions.test.ts         |   8 ++
 .../recipes/slots/fileUploader.test.ts        |   8 ++
 18 files changed, 418 insertions(+), 176 deletions(-)
 create mode 100644 docs/app/react/drag-n-drop/components/dnd-preview.tsx
 create mode 100644 docs/app/react/drag-n-drop/components/draggable.tsx
 create mode 100644 docs/app/react/drag-n-drop/doc.mdx
 create mode 100644 docs/app/react/drag-n-drop/page.tsx
 create mode 100644 packages/react/src/components/Droppable.tsx

diff --git a/docs/app/preset/conditions/doc.mdx b/docs/app/preset/conditions/doc.mdx
index 0fbd3ff9..71c87c40 100644
--- a/docs/app/preset/conditions/doc.mdx
+++ b/docs/app/preset/conditions/doc.mdx
@@ -17,6 +17,8 @@ Cerberus extends the [built-in conditions](https://panda-css.com/docs/concepts/c
 | _darkMode           | `[data-color-mode=dark] &, &.dark, .dark &` |
 | _modalOpen          | `&:is([data-modal-open=true])` |
 | _screenReaderOnly   | `&:is([data-screen-reader-only=true])` |
+| _isOver             | `&:is([data-over=true])` |
+| _isDropped            | `&:is([data-dropped=true])` |
 | _invalid            | `&:is(:invalid, [data-invalid], [aria-invalid])` |
 | _userInvalid        | `&:is(:user-invalid, [aria-invalid])` |
 | _groupInvalid       | `.group:is([data-invalid] &, [aria-invalid]) &` |
diff --git a/docs/app/react/drag-n-drop/components/dnd-preview.tsx b/docs/app/react/drag-n-drop/components/dnd-preview.tsx
new file mode 100644
index 00000000..1fc02f59
--- /dev/null
+++ b/docs/app/react/drag-n-drop/components/dnd-preview.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import {
+  Button,
+  DndContext,
+  Droppable,
+  Show,
+  type DragEndEvent,
+} from '@cerberus-design/react'
+import { useCallback, useState } from 'react'
+import { Draggable } from './draggable'
+import { css } from '@cerberus/styled-system/css'
+
+const draggableMarkup = <Draggable>Drag me</Draggable>
+
+export default function DnDPreview() {
+  const [isDropped, setIsDropped] = useState<boolean>(false)
+
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
+    if (event.over && event.over.id === 'droppable') {
+      setIsDropped(true)
+    }
+  }, [])
+
+  const handleReset = useCallback(() => {
+    setIsDropped(false)
+  }, [])
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <Show
+        when={!isDropped}
+        fallback={<Button onClick={handleReset}>Reset</Button>}
+      >
+        {draggableMarkup}
+      </Show>
+
+      <Droppable
+        className={css({
+          bgColor: 'page.surface.200',
+          border: '4px dashed',
+          borderColor: 'page.border.100',
+          h: '8rem',
+          p: '4',
+          rounded: 'lg',
+          transitionProperty: 'border-color',
+          transitionDuration: '150ms',
+          w: '1/2',
+          _isOver: {
+            borderColor: 'success.border.initial',
+          },
+        })}
+        id="droppable"
+      >
+        <Show when={isDropped} fallback={<>Drop here</>}>
+          {draggableMarkup}
+        </Show>
+      </Droppable>
+    </DndContext>
+  )
+}
diff --git a/docs/app/react/drag-n-drop/components/draggable.tsx b/docs/app/react/drag-n-drop/components/draggable.tsx
new file mode 100644
index 00000000..b59480ed
--- /dev/null
+++ b/docs/app/react/drag-n-drop/components/draggable.tsx
@@ -0,0 +1,34 @@
+import { useDraggable } from '@cerberus-design/react'
+import { css } from '@cerberus/styled-system/css'
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react'
+
+export function Draggable(
+  props: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
+) {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: 'draggable',
+  })
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : undefined
+
+  return (
+    <button
+      className={css({
+        bgColor: 'info.bg.initial',
+        cursor: 'grab',
+        p: '4',
+        rounded: 'lg',
+        userSelect: 'none',
+      })}
+      ref={setNodeRef}
+      style={style}
+      {...listeners}
+      {...attributes}
+    >
+      {props.children}
+    </button>
+  )
+}
diff --git a/docs/app/react/drag-n-drop/doc.mdx b/docs/app/react/drag-n-drop/doc.mdx
new file mode 100644
index 00000000..db153cc8
--- /dev/null
+++ b/docs/app/react/drag-n-drop/doc.mdx
@@ -0,0 +1,98 @@
+---
+heading: 'Drag and Drop'
+description: 'Drag and drop allow users to drag and drop items in the UI.'
+a11y: 'utilities'
+npm: '@cerberus-design/react'
+source: 'components/Draggable.tsx'
+recipe: ''
+---
+
+import {
+  WhenToUseAdmonition,
+  WhenNotToUseAdmonition,
+} from '@/app/components/Admonition'
+import CodePreview from '@/app/components/CodePreview'
+import DnDPreview from '@/app/react/drag-n-drop/components/dnd-preview'
+
+```ts
+import {
+  DndContext,
+  Droppable,
+  useDraggable,
+  useDroppable,
+} from '@cerberus-design/react'
+```
+
+<WhenToUseAdmonition description="When you need add drag and drop functionality to the UI." />
+
+## Usage
+
+<CodePreview preview={<DnDPreview />}>
+```tsx title="nav.tsx"
+'use client'
+
+import {
+  Button,
+  DndContext,
+  Droppable,
+  Show,
+  type DragEndEvent,
+} from '@cerberus-design/react'
+import { useCallback, useState } from 'react'
+import { Draggable } from './draggable'
+import { css } from '@cerberus/styled-system/css'
+
+const draggableMarkup = <Draggable>Drag me</Draggable>
+
+function DnDPreview() {
+  const [isDropped, setIsDropped] = useState<boolean>(false)
+
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
+    if (event.over && event.over.id === 'droppable') {
+      setIsDropped(true)
+    }
+  }, [])
+
+  const handleReset = useCallback(() => {
+    setIsDropped(false)
+  }, [])
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <Show
+        when={!isDropped}
+        fallback={<Button onClick={handleReset}>Reset</Button>}
+      >
+        {draggableMarkup}
+      </Show>
+
+      <Droppable
+        className={css({
+          bgColor: 'page.surface.200',
+          border: '4px dashed',
+          borderColor: 'page.border.100',
+          h: '8rem',
+          p: '4',
+          rounded: 'lg',
+          transitionProperty: 'border-color',
+          transitionDuration: '150ms',
+          w: '1/2',
+          _isOver: {
+            borderColor: 'success.border.initial',
+          },
+        })}
+        id="droppable"
+      >
+        <Show when={isDropped} fallback={<>Drop here</>}>
+          {draggableMarkup}
+        </Show>
+      </Droppable>
+    </DndContext>
+  )
+}
+```
+</CodePreview>
+
+## API
+
+This API is a direct export of the [dnd kit library](https://dndkit.com/)
diff --git a/docs/app/react/drag-n-drop/page.tsx b/docs/app/react/drag-n-drop/page.tsx
new file mode 100644
index 00000000..efa19812
--- /dev/null
+++ b/docs/app/react/drag-n-drop/page.tsx
@@ -0,0 +1,28 @@
+import ApiLinks from '@/app/components/ApiLinks'
+import OnThisPage from '../../components/OnThisPage'
+import { PageMainContent, PageSections } from '../../components/PageLayout'
+import Doc, { frontmatter } from './doc.mdx'
+import FeatureHeader from '@/app/components/FeatureHeader'
+import type { MatchFeatureKind } from '@/app/components/MatchFeatureImg'
+
+export default function DnDPage() {
+  return (
+    <>
+      <PageMainContent>
+        <FeatureHeader
+          heading={frontmatter.heading}
+          description={frontmatter.description}
+          a11y={frontmatter.a11y as MatchFeatureKind}
+        />
+        <ApiLinks {...frontmatter} />
+        <main>
+          <Doc />
+        </main>
+      </PageMainContent>
+
+      <PageSections>
+        <OnThisPage />
+      </PageSections>
+    </>
+  )
+}
diff --git a/docs/app/react/file-uploader/a11y.mdx b/docs/app/react/file-uploader/a11y.mdx
index 1486256c..bd165a47 100644
--- a/docs/app/react/file-uploader/a11y.mdx
+++ b/docs/app/react/file-uploader/a11y.mdx
@@ -9,24 +9,25 @@ import OverviewList from '@/app/components/OverviewList'
 ## Use Cases
 
 <OverviewList intro="Users should be able to:" rules={[
-  'Navigate to and activate a text field with assistive technology',
-  'Input information into the text field',
-  'Receive and understand supporting text and error messages',
-  'Navigate to and select interactive icons',
+  'Navigate to and activate a file uploader with assistive technology',
+  'Select files to upload',
+  'Receive feedback on the status of the upload',
 ]} />
 
 ## Interaction &amp; Style
 
-The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.
+Changes to color and thickness of stroke help provide clear visual cues for interaction.
 
 ## Keyboard Navigation
 
 | Keys     | Actions                                                         |
 | -------- | --------------------------------------------------------------- |
 | Tab      | Focus lands on (non-disabled) input       |
+| Enter    | Opens the file dialog to select a file to upload                |
+| Space    | Opens the file dialog to select a file to upload                |
 
 ## Labeling Elements
 
 If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
 
-The accessibility label for a textfield is typically the same as the label for the textfield.
\ No newline at end of file
+The accessibility label for a input is typically the same as the label for the input.
\ No newline at end of file
diff --git a/docs/app/react/file-uploader/dev.mdx b/docs/app/react/file-uploader/dev.mdx
index 1e5c37a1..8519f8c3 100644
--- a/docs/app/react/file-uploader/dev.mdx
+++ b/docs/app/react/file-uploader/dev.mdx
@@ -6,65 +6,26 @@ recipe: 'label.ts'
 
 import CodePreview from '@/app/components/CodePreview'
 import {
-  LabelBasicPreview,
-  LabelHiddenPreview,
-  LabelOptionalPreview,
-  LabelCustomPreview
-} from '@/app/react/label/components/label-preview'
-import { NoteAdmonition } from '@/app/components/Admonition'
+  BasicFileUploader
+} from '@/app/react/file-uploader/components/file-uploader-preview'
 
 ```ts
-import { Field, Label } from '@cerberus-design/react'
+import { FileUploader } from '@cerberus-design/react'
 ```
 
 ## Usage
 
-<CodePreview preview={<LabelBasicPreview />}>
-```tsx title="first-name-input.tsx" {5,6}
-import { Field, Label } from '@cerberus-design/react'
+<CodePreview preview={<BasicFileUploader />}>
+```tsx title="file-uploader.tsx" {5,6}
+import { FileUploader } from '@cerberus-design/react'
 
-function LabelBasicPreview() {
+function BasicFileUploader() {
   return (
-    <Field required>
-      <Label htmlFor="first_name">First Name</Label>
-      <Input id="first_name" placeholder="Type your first name" type="text" />
-    </Field>
-  )
-}
-```
-</CodePreview>
-
-## Hidden
-
-<CodePreview preview={<LabelHiddenPreview />}>
-```tsx title="search-input.tsx" {6}
-import { Field, Label } from '@cerberus-design/react'
-
-function LabelHiddenPreview() {
-  return (
-    <Field required>
-      <Label htmlFor="global_search" hidden>
-        Search anything
-      </Label>
-      <Input id="global_search" placeholder="Search anything" type="text" />
-    </Field>
-  )
-}
-```
-</CodePreview>
-
-## Optional
-
-<CodePreview preview={<LabelOptionalPreview />}>
-```tsx title="search-input.tsx" {5}
-import { Field, Label } from '@cerberus-design/react'
-
-function LabelOptionalPreview() {
-  return (
-    <Field>
-      <Label htmlFor="preferred">Preferred Name</Label>
-      <Input id="preferred" placeholder="i.e. Johnny" type="text" />
-    </Field>
+    <FileUploader
+      accept=".csv,.docx"
+      heading="Upload Files"
+      name="basic-example"
+    />
   )
 }
 ```
@@ -72,62 +33,25 @@ function LabelOptionalPreview() {
 
 ## Customizing
 
-<CodePreview preview={<LabelCustomPreview />}>
-```tsx title="search-input.tsx"
-import { Field, Label } from '@cerberus-design/react'
-
-function LabelCustomPreview() {
-  return (
-    <Field required>
-      <Label
-        className={css({
-          fontSize: '2rem',
-          bgColor: 'black',
-          color: 'yellow',
-        })}
-        htmlFor="global_search"
-      >
-        Killa Bees
-      </Label>
-      <input id="global_search" type="text" />
-    </Field>
-  )
-}
-
-```
-</CodePreview>
+To customize the FileUploader, we recommend extending the `fileUploader` slot recipe in your panda config.
 
 ## API
 
-<NoteAdmonition description="The Label component must be used within a Field provider." />
-
-```ts showLineNumbers=false
-export interface FieldProps {
-  disabled?: boolean
-  invalid?: boolean
-  required?: boolean
-  readOnly?: boolean
-}
-
-define function Field(props: PropsWithChildren<FieldProps>): ReactNode
-```
-
 ```ts showLineNumbers=false
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  htmlFor: string
-  hidden?: boolean
-  size?: 'sm' | 'md'
+export interface FileUploaderProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  heading?: string
+  name: string
 }
 
-define function Label(props: LabelProps): ReactNode
+define function FileUploader(props: FileUploaderProps): ReactNode
 ```
 
 ### Props
 
-The `LabelProps` component accepts the following props:
+The `FileUploader` component accepts the following props:
 
 | Name     | Default | Description                                                   |
 | -------- | ------- | ------------------------------------------------------------- |
-| htmlFor     | null   | The `name` attribute of the Input the Label is associated with. |
-| hidden   | false   | Whether the Label content should be visually hidden.                 |
-| size     | 'md'    | The size of the Label.         |
+| heading  |         | The heading for the file uploader                             |
+| name     |         | The unique name of the file uploader                                  |
diff --git a/docs/app/react/file-uploader/guidelines.mdx b/docs/app/react/file-uploader/guidelines.mdx
index a0d10658..1adfd6d6 100644
--- a/docs/app/react/file-uploader/guidelines.mdx
+++ b/docs/app/react/file-uploader/guidelines.mdx
@@ -4,46 +4,29 @@
 import CodePreview from '@/app/components/CodePreview'
 import OverviewList from '@/app/components/OverviewList'
 import {
-  WhenToUseAdmonition,
-  WhenNotToUseAdmonition,
+  WhenToUseAdmonition
 } from '@/app/components/Admonition'
 import {
-  LabelBasicPreview,
-  LabelHiddenPreview,
-  LabelOptionalPreview
-} from '@/app/react/label/components/label-preview'
+  BasicFileUploader
+} from '@/app/react/file-uploader/components/file-uploader-preview'
 
 ## Usage
 
-<WhenToUseAdmonition description="When you use an input in the UI, regardless if it has a visible label or not." />
+<WhenToUseAdmonition description="When you need to provide a way for users to upload files to the server." />
 
-<WhenNotToUseAdmonition description="Labels should always accompany any type of input." />
+## File Uploader
 
+File Uploaders can be used for any type of file (i.e. text, images, video, etc.).
 
-## Standard Labels
-
-Standard labels are used for most input use cases.
-
-<CodePreview preview={<LabelOptionalPreview />} />
-
-<WhenToUseAdmonition description="When you use any type of standard inputs within a form." />
-
-## Hidden Labels
-
-Hidden labels are used when the label is not visible to the user, but still needs to be present for screen readers.
-
-<CodePreview preview={<LabelHiddenPreview />} />
-
-<WhenToUseAdmonition description="When you need an input that doesn't use a visual label (i.e., global search input)" />
-
-## Required Labels
-
-Required labels are used when the input is required.
-
-<CodePreview preview={<LabelBasicPreview />} />
-
-<WhenToUseAdmonition description="When the input is required." />
+<CodePreview preview={<BasicFileUploader />} />
 
 ## Placement
 
-Labels should be placed above the input field. For checkboxes and radio buttons, the label should be placed to the right of the input.
+File Uploaders should be placed in a location that is easy to find and use.
+
+<OverviewList intro="They can be placed in:" rules={[
+  'Forms',
+  'Modals',
+  'Pages',
+  'Sidebars',
+]} />
diff --git a/docs/app/react/side-nav.json b/docs/app/react/side-nav.json
index d4c3a8b5..a8c2b2d6 100644
--- a/docs/app/react/side-nav.json
+++ b/docs/app/react/side-nav.json
@@ -149,6 +149,13 @@
     "tag": "next",
     "type": "route"
   },
+  {
+    "id": "2:t",
+    "label": "Drag & Drop",
+    "route": "/react/drag-n-drop",
+    "tag": "next",
+    "type": "route"
+  },
   {
     "id": "3",
     "label": "Hooks",
diff --git a/packages/panda-preset/src/conditions.ts b/packages/panda-preset/src/conditions.ts
index 6f2e1927..14529208 100644
--- a/packages/panda-preset/src/conditions.ts
+++ b/packages/panda-preset/src/conditions.ts
@@ -9,6 +9,8 @@ export const conditions = {
   // states
   modalOpen: '&:is([data-modal-open=true])',
   screenReaderOnly: '&:is([data-screen-reader-only=true])',
+  isOver: '&:is([data-over=true])',
+  isDropped: '&:is([data-dropped=true])',
   invalid: '&:is(:invalid, [data-invalid], [aria-invalid])',
   userInvalid: '&:is(:user-invalid, [aria-invalid])',
   groupInvalid: '.group:is([data-invalid] &, [aria-invalid]) &',
diff --git a/packages/panda-preset/src/recipes/slots/fileUploader.ts b/packages/panda-preset/src/recipes/slots/fileUploader.ts
index 99e27d12..bf487865 100644
--- a/packages/panda-preset/src/recipes/slots/fileUploader.ts
+++ b/packages/panda-preset/src/recipes/slots/fileUploader.ts
@@ -1,5 +1,6 @@
 import { defineSlotRecipe, type SlotRecipeConfig } from '@pandacss/dev'
 import { modalIconBase } from '../shared/modal.base'
+import { focusStates } from '../shared/states'
 
 /**
  * This module contains the fileUploader recipe.
@@ -29,20 +30,30 @@ export const fileUploader: Partial<SlotRecipeConfig> = defineSlotRecipe({
       maxW: '36rem',
       py: '6',
       rounded: 'md',
-      transitionProperty: 'background-color, border',
+      transitionProperty: 'background-color, border, opacity',
       transitionDuration: '150ms',
       transitionTimingFunction: 'ease-in-out',
       w: 'full',
       _hover: {
         borderColor: 'action.border.focus',
+        borderStyle: 'solid',
         bgColor: 'action.ghost.hover',
       },
+      _isOver: {
+        borderColor: 'action.border.focus',
+        borderStyle: 'solid',
+        bgColor: 'action.ghost.hover',
+      },
+      _isDropped: {
+        opacity: '0.5',
+      },
     },
     label: {
       // combine with vstack
       gap: '1',
       justify: 'center',
       position: 'relative',
+      rounded: 'md',
       textStyle: 'label-sm',
       userSelect: 'none',
     },
@@ -59,13 +70,16 @@ export const fileUploader: Partial<SlotRecipeConfig> = defineSlotRecipe({
       transitionDuration: '150ms',
     },
     input: {
+      appearance: 'none',
       bottom: '0',
       cursor: 'pointer',
       left: '0',
       opacity: '0',
       position: 'absolute',
       right: '0',
+      rounded: 'md',
       top: '0',
+      ...focusStates,
     },
   },
 })
diff --git a/packages/react/package.json b/packages/react/package.json
index 02b4911e..e06fde61 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -20,6 +20,9 @@
     "react": "*",
     "react-dom": "*"
   },
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0"
+  },
   "devDependencies": {
     "@cerberus-design/configs": "workspace:*",
     "@cerberus-design/styled-system": "workspace:*",
diff --git a/packages/react/src/components/Droppable.tsx b/packages/react/src/components/Droppable.tsx
new file mode 100644
index 00000000..10af880b
--- /dev/null
+++ b/packages/react/src/components/Droppable.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'
+import { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'
+
+export interface DroppableProps
+  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,
+    UseDroppableArguments {
+  dropped?: boolean
+}
+
+export function Droppable(props: PropsWithChildren<DroppableProps>) {
+  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =
+    props
+  const uuid = useId()
+  const { isOver, setNodeRef } = useDroppable({
+    data,
+    disabled,
+    id: id || uuid,
+    resizeObserverConfig,
+  })
+
+  return (
+    <div
+      {...nativeProps}
+      data-over={isOver}
+      data-dropped={dropped}
+      ref={setNodeRef}
+    >
+      {props.children}
+    </div>
+  )
+}
diff --git a/packages/react/src/components/FileUploader.tsx b/packages/react/src/components/FileUploader.tsx
index 03be82cc..01b2e3ac 100644
--- a/packages/react/src/components/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import { cx } from '@cerberus-design/styled-system/css'
 import { circle, vstack } from '@cerberus-design/styled-system/patterns'
-import type { InputHTMLAttributes } from 'react'
+import { type InputHTMLAttributes } from 'react'
 import { Show } from './Show'
 import { fileUploader, modalIcon } from '@cerberus-design/styled-system/recipes'
 import { $cerberusIcons } from '../config/defineIcons'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index e58de6ce..ff30d5e7 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -6,6 +6,7 @@
 // components
 
 export * from './components/Button'
+export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
 export * from './components/FileUploader'
@@ -59,3 +60,7 @@ export * from './config/defineIcons'
 // shared types
 
 export * from './types'
+
+// 3rd party
+
+export * from '@dnd-kit/core'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee4117bb..5e1d595e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,7 +112,7 @@ importers:
         version: link:../packages/panda-preset
       '@csstools/postcss-cascade-layers':
         specifier: ^4.0.6
-        version: 4.0.6(postcss@8.4.40)
+        version: 4.0.6(postcss@8.4.38)
       '@expressive-code/plugin-line-numbers':
         specifier: ^0.35.3
         version: 0.35.3
@@ -151,7 +151,7 @@ importers:
         version: 18.3.0
       autoprefixer:
         specifier: ^10.4.19
-        version: 10.4.19(postcss@8.4.40)
+        version: 10.4.19(postcss@8.4.38)
       color-space:
         specifier: ^2.0.1
         version: 2.0.1
@@ -272,6 +272,9 @@ importers:
       '@cerberus/styled-system':
         specifier: npm:@cerberus-design/styled-system
         version: '@cerberus-design/styled-system@0.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)'
+      '@dnd-kit/core':
+        specifier: ^6.1.0
+        version: 6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@pandacss/dev':
         specifier: '*'
         version: 0.39.0(typescript@5.4.5)
@@ -299,7 +302,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       tsup:
         specifier: ^8.1.0
-        version: 8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.14.14))(postcss@8.4.35)(typescript@5.4.5)
+        version: 8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.14.14))(postcss@8.4.40)(typescript@5.4.5)
 
   packages/styled-system:
     devDependencies:
@@ -508,6 +511,22 @@ packages:
     resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==}
     engines: {node: '>=14'}
 
+  '@dnd-kit/accessibility@3.1.0':
+    resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.1.0':
+    resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@esbuild/aix-ppc64@0.19.12':
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
@@ -982,10 +1001,12 @@ packages:
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@@ -993,6 +1014,7 @@ packages:
 
   '@humanwhocodes/object-schema@2.0.3':
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
 
   '@humanwhocodes/retry@0.2.3':
     resolution: {integrity: sha512-X38nUbachlb01YMlvPFojKoiXq+LzZvuSce70KPMPdeM1Rj03k4dR7lDslhbqXn3Ang4EU3+EAmwEAsbrjHW3g==}
@@ -2198,6 +2220,7 @@ packages:
 
   bun@1.1.6:
     resolution: {integrity: sha512-0oKx5dVZ8LpsAvXdW2DTR5Zt3KS81Ifjx9T2ma7RjDPKbvGIlDXOPt++tr1SndxhFNFsMFeE4i6VKvlL7IR0Zw==}
+    cpu: [arm64, x64]
     os: [darwin, linux, win32]
     hasBin: true
 
@@ -4857,9 +4880,6 @@ packages:
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
-  tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
@@ -5376,6 +5396,24 @@ snapshots:
 
   '@ctrl/tinycolor@4.1.0': {}
 
+  '@dnd-kit/accessibility@3.1.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.3
+
+  '@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.0(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.6.3
+
+  '@dnd-kit/utilities@3.2.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.3
+
   '@esbuild/aix-ppc64@0.19.12':
     optional: true
 
@@ -6631,7 +6669,7 @@ snapshots:
   '@swc/helpers@0.5.5':
     dependencies:
       '@swc/counter': 0.1.3
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@testing-library/dom@10.1.0':
     dependencies:
@@ -7301,6 +7339,16 @@ snapshots:
 
   asynckit@0.4.0: {}
 
+  autoprefixer@10.4.19(postcss@8.4.38):
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-lite: 1.0.30001612
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+
   autoprefixer@10.4.19(postcss@8.4.40):
     dependencies:
       browserslist: 4.23.0
@@ -7916,8 +7964,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.1(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -7959,13 +8007,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 4.3.4
       enhanced-resolve: 5.16.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.3
       is-core-module: 2.13.1
@@ -7976,24 +8024,14 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.11.0(eslint@9.1.1)(typescript@5.4.5)
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -8014,7 +8052,7 @@ snapshots:
       eslint: 9.1.1
       eslint-compat-utils: 0.5.1(eslint@9.1.1)
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -8024,7 +8062,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.11.0(eslint@9.1.1)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -8035,7 +8073,7 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 7.11.0(eslint@9.1.1)(typescript@5.4.5)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -10090,13 +10128,6 @@ snapshots:
     dependencies:
       postcss: 8.4.40
 
-  postcss-load-config@4.0.2(postcss@8.4.35):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.4.5
-    optionalDependencies:
-      postcss: 8.4.35
-
   postcss-load-config@4.0.2(postcss@8.4.40):
     dependencies:
       lilconfig: 3.1.2
@@ -10843,8 +10874,6 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@2.6.2: {}
-
   tslib@2.6.3: {}
 
   tsup@8.0.2(@microsoft/api-extractor@7.46.2(@types/node@20.14.14))(postcss@8.4.40)(typescript@5.4.5):
@@ -10871,7 +10900,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  tsup@8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.14.14))(postcss@8.4.35)(typescript@5.4.5):
+  tsup@8.1.0(@microsoft/api-extractor@7.46.2(@types/node@20.14.14))(postcss@8.4.40)(typescript@5.4.5):
     dependencies:
       bundle-require: 4.2.1(esbuild@0.21.5)
       cac: 6.7.14
@@ -10881,7 +10910,7 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 4.0.2(postcss@8.4.35)
+      postcss-load-config: 4.0.2(postcss@8.4.40)
       resolve-from: 5.0.0
       rollup: 4.18.1
       source-map: 0.8.0-beta.0
@@ -10889,7 +10918,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@microsoft/api-extractor': 7.46.2(@types/node@20.14.14)
-      postcss: 8.4.35
+      postcss: 8.4.40
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
diff --git a/tests/panda-preset/conditions.test.ts b/tests/panda-preset/conditions.test.ts
index c1755bff..c928205f 100644
--- a/tests/panda-preset/conditions.test.ts
+++ b/tests/panda-preset/conditions.test.ts
@@ -28,6 +28,14 @@ describe('conditions', () => {
     )
   })
 
+  test('should have an isOver', () => {
+    expect(conditions.isOver).toEqual('&:is([data-over=true])')
+  })
+
+  test('should have an isDropped', () => {
+    expect(conditions.isDropped).toEqual('&:is([data-dropped=true])')
+  })
+
   test('should have an invalid', () => {
     expect(conditions.invalid).toEqual(
       '&:is(:invalid, [data-invalid], [aria-invalid])',
diff --git a/tests/panda-preset/recipes/slots/fileUploader.test.ts b/tests/panda-preset/recipes/slots/fileUploader.test.ts
index c251d850..a87f8d86 100644
--- a/tests/panda-preset/recipes/slots/fileUploader.test.ts
+++ b/tests/panda-preset/recipes/slots/fileUploader.test.ts
@@ -56,6 +56,7 @@ describe('fileUploader recipe', () => {
 
   test('should have a input style', () => {
     expect(fileUploader.base?.input).toMatchObject({
+      appearance: 'none',
       bottom: '0',
       cursor: 'pointer',
       left: '0',
@@ -63,6 +64,13 @@ describe('fileUploader recipe', () => {
       position: 'absolute',
       right: '0',
       top: '0',
+      rounded: 'md',
+      _focusVisible: {
+        boxShadow: 'none',
+        outline: '3px solid',
+        outlineColor: 'action.border.focus',
+        outlineOffset: '2px',
+      },
     })
   })
 })

From fd6d71e0a1c11d78ba1755ae21b1b8f93f111431 Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Tue, 20 Aug 2024 15:30:11 -0500
Subject: [PATCH 08/10] test: add droppable.test.tsx

---
 tests/react/components/droppable.test.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 tests/react/components/droppable.test.tsx

diff --git a/tests/react/components/droppable.test.tsx b/tests/react/components/droppable.test.tsx
new file mode 100644
index 00000000..256eb597
--- /dev/null
+++ b/tests/react/components/droppable.test.tsx
@@ -0,0 +1,18 @@
+import { describe, test, expect, afterEach } from 'bun:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Droppable } from '@cerberus-design/react'
+import { setupStrictMode } from '@/utils'
+
+describe('Droppable', () => {
+  setupStrictMode()
+  afterEach(cleanup)
+
+  test('should render children', () => {
+    render(
+      <Droppable id="test">
+        <div>children</div>
+      </Droppable>,
+    )
+    expect(screen.getByText('children')).toBeTruthy()
+  })
+})

From 0e88032550b3db04612888fa1c136d2f15ccbb64 Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Tue, 20 Aug 2024 15:33:18 -0500
Subject: [PATCH 09/10] chore: kill unused label-preview.tsx

---
 .../components/label-preview.tsx              | 61 -------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 docs/app/react/file-uploader/components/label-preview.tsx

diff --git a/docs/app/react/file-uploader/components/label-preview.tsx b/docs/app/react/file-uploader/components/label-preview.tsx
deleted file mode 100644
index 0e264ede..00000000
--- a/docs/app/react/file-uploader/components/label-preview.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Field, Input, Label } from '@cerberus-design/react'
-import { css } from '@cerberus/styled-system/css'
-
-const overrideStyles = css({
-  w: '1/2',
-})
-
-export function LabelBasicPreview() {
-  return (
-    <div className={overrideStyles}>
-      <Field required>
-        <Label htmlFor="first_name">First Name</Label>
-        <Input id="first_name" placeholder="Type your first name" type="text" />
-      </Field>
-    </div>
-  )
-}
-
-export function LabelHiddenPreview() {
-  return (
-    <div className={overrideStyles}>
-      <Field required>
-        <Label htmlFor="global_search" hidden>
-          Search anything
-        </Label>
-        <Input id="global_search" placeholder="Search anything" type="text" />
-      </Field>
-    </div>
-  )
-}
-
-export function LabelOptionalPreview() {
-  return (
-    <div className={overrideStyles}>
-      <Field>
-        <Label htmlFor="preferred">Preferred Name</Label>
-        <Input id="preferred" placeholder="i.e. Johnny" type="text" />
-      </Field>
-    </div>
-  )
-}
-
-export function LabelCustomPreview() {
-  return (
-    <div className={overrideStyles}>
-      <Field required>
-        <Label
-          className={css({
-            fontSize: '2rem',
-            bgColor: 'black',
-            color: 'yellow',
-          })}
-          htmlFor="global_search"
-        >
-          Killa Bees
-        </Label>
-        <Input id="global_search" type="text" />
-      </Field>
-    </div>
-  )
-}

From 9cc759e0c2bba5e79b3ce46a765626a3eb6ad930 Mon Sep 17 00:00:00 2001
From: "@casey_baggz_omni" <casey.baggz@omnifederal.com>
Date: Tue, 20 Aug 2024 15:37:03 -0500
Subject: [PATCH 10/10] test: update fileUploader.test.ts

---
 .../recipes/slots/fileUploader.test.ts           | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/tests/panda-preset/recipes/slots/fileUploader.test.ts b/tests/panda-preset/recipes/slots/fileUploader.test.ts
index a87f8d86..f4d0a234 100644
--- a/tests/panda-preset/recipes/slots/fileUploader.test.ts
+++ b/tests/panda-preset/recipes/slots/fileUploader.test.ts
@@ -3,6 +3,7 @@ import { slotRecipes } from '@cerberus-design/panda-preset'
 
 describe('fileUploader recipe', () => {
   const { fileUploader } = slotRecipes
+  const BORDER_COLOR = 'action.border.focus'
 
   test('should be exported', () => {
     expect(fileUploader).toBeDefined()
@@ -19,14 +20,23 @@ describe('fileUploader recipe', () => {
       maxW: '36rem',
       py: '6',
       rounded: 'md',
-      transitionProperty: 'background-color, border',
+      transitionProperty: 'background-color, border, opacity',
       transitionDuration: '150ms',
       transitionTimingFunction: 'ease-in-out',
       w: 'full',
       _hover: {
-        borderColor: 'action.border.focus',
+        borderColor: BORDER_COLOR,
+        borderStyle: 'solid',
         bgColor: 'action.ghost.hover',
       },
+      _isOver: {
+        borderColor: BORDER_COLOR,
+        borderStyle: 'solid',
+        bgColor: 'action.ghost.hover',
+      },
+      _isDropped: {
+        opacity: '0.5',
+      },
     })
   })
 
@@ -68,7 +78,7 @@ describe('fileUploader recipe', () => {
       _focusVisible: {
         boxShadow: 'none',
         outline: '3px solid',
-        outlineColor: 'action.border.focus',
+        outlineColor: BORDER_COLOR,
         outlineOffset: '2px',
       },
     })