💄 style: Update Accordion

Author: canisminor1990

src/Accordion/AccordionItem.tsx

@@ -27,6 +27,9 @@ const AccordionItem = memo<AccordionItemProps>(
     classNames,
     paddingInline = 16,
     paddingBlock = 8,
+    padding,
+    ref,
+    variant: customVariant,
     styles: customStyles,
   }) => {
     const { cx, styles } = useStyles();
@@ -231,16 +234,18 @@ const AccordionItem = memo<AccordionItemProps>(
           justify={'space-between'}
           onClick={handleToggle}
           onKeyDown={handleKeyDown}
+          padding={padding}
           paddingBlock={paddingBlock}
           paddingInline={paddingInline}
+          ref={ref}
           style={{
             alignItems: 'center',
             cursor: disabled ? 'not-allowed' : 'pointer',
             opacity: disabled ? 0.5 : undefined,
             overflow: 'hidden',
             width: '100%',
           }}
-          variant={variant}
+          variant={customVariant || variant}
         >
           {indicatorPlacementFinal === 'start' ? (
             <>

src/Accordion/type.ts

@@ -3,7 +3,7 @@ import type { CSSProperties, HTMLAttributes, Key, ReactNode } from 'react';
 import type { BlockProps } from '@/Block';
 
 export interface AccordionItemProps
-  extends Pick<BlockProps, 'padding' | 'paddingBlock' | 'paddingInline' | 'variant'> {
+  extends Pick<BlockProps, 'padding' | 'paddingBlock' | 'paddingInline' | 'variant' | 'ref'> {
   /**
    * Action component that appears on hover
    */