From 199d6659595eaa934538730be884ddbd94cc451d Mon Sep 17 00:00:00 2001
From: Damini <daminipandey1310@gmail.com>
Date: Fri, 8 Dec 2023 10:19:38 +0530
Subject: [PATCH] fix: shadow color

---
 .../Disclosure/Accordion/index.stories.mdx    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/index.stories.mdx b/example/storybook/src/ui/components/Disclosure/Accordion/index.stories.mdx
index 82985d9269..88d1bb9ae7 100644
--- a/example/storybook/src/ui/components/Disclosure/Accordion/index.stories.mdx
+++ b/example/storybook/src/ui/components/Disclosure/Accordion/index.stories.mdx
@@ -524,6 +524,7 @@ function App(){
       type="multiple"
       m="$5"
       borderWidth={1}
+      shadowColor="transparent"
       sx={{
             borderColor: '$borderLight300',
           _dark: {
@@ -704,7 +705,7 @@ The borderRadius prop can be used to create rounded corners for both the Accordi
       code: `
 function App(){
     return (
-          <Accordion m="$5" width="80%" maxWidth={640}>
+          <Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent">
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
           <AccordionTrigger>
@@ -1180,8 +1181,8 @@ You can make the Accordion component controlled by passing the value prop to the
 function App(){
     const [selectedValues, setSelecedValues] = React.useState(['item-1', 'item-2']);
     return (
-    <Accordion m="$5" variant="unfilled" width="90%" type="multiple" value={selectedValues} onValueChange={(item) => setSelecedValues(item)}>
-      <AccordionItem value="item-1" borderBottomWidth={1} 
+    <Accordion m="$5" variant="unfilled" width="95%" type="multiple" value={selectedValues} onValueChange={(item) => setSelecedValues(item)}>
+      <AccordionItem value="item-1" borderTopWidth={1} borderBottomWidth={1} 
       sx={{
             borderColor: '$borderLight300',
           _dark: {
@@ -1214,13 +1215,7 @@ function App(){
         </AccordionContent>
       </AccordionItem>
    
-      <AccordionItem value="item-2" borderBottomWidth={1}
-          sx={{
-            borderColor: '$borderLight300',
-          _dark: {
-            borderColor: '$borderDark700',
-          },
-      }}
+      <AccordionItem value="item-2"
       >
         <AccordionHeader>
           <AccordionTrigger>
@@ -1246,7 +1241,13 @@ function App(){
           </AccordionContentText>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem value="item-3">
+      <AccordionItem value="item-3"  borderTopWidth={1}  borderBottomWidth={1}
+          sx={{
+            borderColor: '$borderLight300',
+          _dark: {
+            borderColor: '$borderDark700',
+          },
+      }}>
         <AccordionHeader>
           <AccordionTrigger>
             {({ isExpanded }) => {