playbook_ui 13.14.0.pre.alpha.play1101betaicons1825 → 13.14.0.pre.alpha.play1106filter1748

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c0691ea09bf36304c045cc08897545b9c002c1c4c31c9670566bfa92fcc42f66
-  data.tar.gz: 968247f2c5bc1d7ba589a63657ca4167c91fc63113e1c74009fda6bbe9b18525
+  metadata.gz: f272c5d989be26b3c950987f4c51f59584acd918be553652bcba094822f20e30
+  data.tar.gz: 2ee2b321862499edac8e935e29c03cb3c395fb03d23b9a89526ea66ae02f8d9e
 SHA512:
-  metadata.gz: 3d1144ce8d889ad0f3e664b2b2b59f39fb311cc3ba7061a86c78aaf280576f06ad765882b33cfdb4057a60e9c0ebb55be088b48e9db4e337975f3ee690714f13
-  data.tar.gz: a13cf6459ce4f8b9d31357ec8ddd4ab433a59948dcbfeb91a89b33641ec3d2dab6ea9e397635b5b8424d7974bbdcfed8494439b12110b7da4690897ad4c06c6c
+  metadata.gz: 8ed8dda83ec7bf30f439f43761a44a34914fcbcd80e8786d73b57f31c8b91628b31381d6bd209ffc8b1a2f6a69b7116a24a1e3ed54814f976356390c5e2f4f72
+  data.tar.gz: d6971706d60344e0748c76dec38f0a98fea3ca83cfbd26f7090f3598cd6a3b35ec6d873fd4f128786e223bd4bbff9af86fbe57fb1ad231ecaee92b94085b0a0d

data/app/pb_kits/playbook/_playbook.scss

@@ -114,6 +114,5 @@
 @import './utilities/hover';
 @import './utilities/text_align';
 @import './utilities/overflow';
-@import './utilities/truncate';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/index.js

@@ -9,7 +9,6 @@ export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar
 export { default as Background } from './pb_background/_background'
 export { default as Badge } from './pb_badge/_badge'
 export { default as BarGraph } from './pb_bar_graph/_bar_graph'
-export { default as BetaIcon } from './pb_beta_icon/_icon'
 export { default as Body } from './pb_body/_body'
 export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
 export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
@@ -143,4 +142,4 @@ export { default as scale } from './tokens/exports/_scale.scss'
 export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
 export { default as shadows } from './tokens/exports/_shadows.scss'
 export { default as spacing } from './tokens/exports/_spacing.scss'
-export { default as typography } from './tokens/exports/_typography.scss'
+export { default as typography } from './tokens/exports/_typography.scss'

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -32,7 +32,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     className,
     data = {},
     htmlOptions = {},
-    name = undefined,
+    name = null,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -40,8 +40,8 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     status = null,
     dark = false,
   } = props
-  const dataProps: {[key: string]: string} = buildDataProps(data)
-  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
@@ -50,7 +50,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   )
 
   const initials = name && firstTwoInitials(name)
-  dataProps['data-initials'] = (initials as string)
+  dataProps['data-initials'] = initials
 
   const [error, setError] = useState(false)
   const handleError = () => setError(true)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -19,8 +19,8 @@ type AvatarActionButtonProps = {
   linkAriaLabel?: string,
   className?: string,
   dark?: boolean,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: Object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -31,7 +31,7 @@ type AvatarActionButtonProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
 }
 
-const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
+const AvatarActionButton = (props: AvatarActionButtonProps) => {
   const {
     action = 'add',
     aria = {},

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -23,7 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -63,7 +63,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
   return prop?.default || undefined;
 };
 
-const Background = (props: BackgroundProps): React.ReactElement => {
+const Background = (props: BackgroundProps) => {
   const {
     alt = '',
     aria = {},
@@ -144,13 +144,13 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   
   return (
     <Tag
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        alt={alt}
-        className={classes}
-        id={id}
-        style={backgroundStyle}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      alt={alt}
+      className={classes}
+      id={id}
+      style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -19,7 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -27,7 +27,7 @@ type BadgeProps = {
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
-const Badge = (props: BadgeProps): React.ReactElement => {
+const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -19,9 +19,9 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
-  id: string;
-  pointStart: number;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  id: any;
+  pointStart: number | any;
   subTitle?: string;
   title: string;
   type?: string;

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -37,10 +37,15 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
+  
+  &[class*=_truncate] {
+    @include body_truncate;
+  }
 
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);
+      @include body_truncate;
     }
   }
 

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -15,11 +15,12 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | 'link',
 } & GlobalProps
 
@@ -38,18 +39,21 @@ const Body = (props: BodyProps): React.ReactElement => {
     status = null,
     tag = 'div',
     text = '',
+    truncate = null,
     variant = null,
   } = props
 
-  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
-  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
+  const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
-    buildCss('pb_body_kit', color, variant, status),
+    buildCss('pb_body_kit', color, variant, status, isTruncated),
     globalProps(props),
     className
   )
-  const Tag: keyof JSX.IntrinsicElements = `${tag}`
+  const Tag: React.ReactElement | any = `${tag}`
+
 
   return (
     <Tag

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -36,6 +36,26 @@ $pb_body_status: (
   font-family: $font-family-base;
 }
 
+$pb_body_truncate: (
+  truncate_1: 1,
+  truncate_2: 2,
+  truncate_3: 3,
+  truncate_4: 4,
+  truncate_5: 5
+);
+
+@mixin body_truncate {
+  @each $name, $number in $pb_body_truncate {
+    &[class*=_#{$name}] {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: $number;
+      -webkit-box-orient: vertical; 
+    }
+  }
+}
+
+
 // Colors ======================
 @mixin pb_body_light {
   @include pb_body($text_lt_light);

data/app/pb_kits/playbook/pb_body/body.rb

@@ -18,9 +18,12 @@ module Playbook
                           default: false
       prop :highlighted_text, type: Playbook::Props::Array,
                               default: []
+      prop :truncate, type: Playbook::Props::Enum,
+                      values: [nil, "1", "2", "3", "4", "5"],
+                      default: nil
 
       def classname
-        generate_classname("pb_body_kit", color_class, status_class)
+        generate_classname("pb_body_kit", color_class, status_class, is_truncated)
       end
 
       def content
@@ -28,6 +31,10 @@ module Playbook
         highlighting ? apply_highlight(body_text) : body_text
       end
 
+      def is_truncated
+        truncate ? "truncate_#{truncate}" : nil
+      end
+
     private
 
       def apply_highlight(text)

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -13,14 +13,15 @@ import {
 type BreadCrumbItemProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   component?: "a" | "span",
   [x:string]: any;
 }
 
-const BreadCrumbItem = (props: BreadCrumbItemProps): React.ReactElement => {
+
+const BreadCrumbItem = (props: BreadCrumbItemProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -12,13 +12,13 @@ import {
 type BreadCrumbsProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text?: string,
   children?: React.ReactChild[] | React.ReactNode,
 }
-const BreadCrumbs = (props: BreadCrumbsProps): React.ReactElement => {
+const BreadCrumbs = (props: BreadCrumbsProps) => {
   const {
     aria = { label: 'Breadcrumb Navigation' },
     className,

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -21,7 +21,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -66,7 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const Button = (props: ButtonPropTypes): React.ReactElement => {
+const Button = (props: ButtonPropTypes) => {
   const {
     aria = {},
     children,
@@ -150,16 +150,16 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
     if (link) {
       return (
         <a
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={css}
-            href={link}
-            id={id}
-            rel={target !== "child" ? "noreferrer" : null}
-            role="link"
-            tabIndex={tabIndex}
-            target={getTargetAttribute()}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={css}
+          href={link}
+          id={id}
+          rel={target !== "child" ? "noreferrer" : null}
+          role="link"
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
@@ -167,27 +167,24 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
     } else if (variant === "reaction") {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {icon && isValidEmoji(icon) && (
             <Flex align='center'>
               <Icon icon={icon} />
               {count && (
-                <Caption 
-                    paddingLeft="xxs"
-                    size="xs"
-                >
+                <Caption paddingLeft="xxs" size="xs">
                   {count}
                 </Caption>
               )}
@@ -206,18 +203,18 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
     } else {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {ifLoading()}
         </button>

data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md

@@ -9,14 +9,3 @@
 | **Icon** | `PBIcon` | Adds an icon to the Button | `nil` |  |
 | **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
 | **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` |  |
-
-### Reaction Button Props
-| Name | Type | Description | Default | Values |
-| --- | ----------- | --------- | --------- | --------- |
-| **count** | `Int` | Tracks number of times a reaction button has been pressed | `0` |  |
-| **isHighlighted** | `Bool` | Boolean for whether or not a reaction button has a highlight | ` false` | `true` `false` |
-| **isHovering** | `Bool` | Boolean for whether or not a mouse is hovering over the reaction button | `false` | `true` `false` |
-| **icon** | `String` | Allows user to use a unicode string for an emoji reaction button |  |  |
-| **pbIcon** | `PBIcon` | A PlayBook Icon option for reaction button | |  |
-| **isInteractive** | `Bool` | Boolean for whether or not a reaction button is interactive | `false` | `true` `false` |
-

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -32,5 +32,4 @@ examples:
   - button_icon_options_swift: Button Icon Options
   - button_circle_swift: Circle Button
   - button_size_swift: Button Size
-  - button_reaction_swift: Button Reaction
   - button_props_swift: ""

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -12,8 +12,8 @@ type ButtonToolbarProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   connected?: boolean,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -21,7 +21,7 @@ type ButtonToolbarProps = {
  variant?: "primary" | "secondary",
 }
 
-const ButtonToolbar  = (props: ButtonToolbarProps): React.ReactElement => {
+const ButtonToolbar  = (props: ButtonToolbarProps) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -9,7 +9,7 @@ type CaptionProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -16,7 +16,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -69,7 +69,7 @@ const Body = (props: CardBodyProps) => {
   )
 }
 
-const Card = (props: CardPropTypes): React.ReactElement => {
+const Card = (props: CardPropTypes) => {
   const {
     aria = {},
     background = 'none',

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -57,7 +57,7 @@ const CardBackground = (props) => {
           background="product_1_background"
           marginBottom="sm"
           {...props}
-      >
+        >
         <Body
             dark
             text="Product 1 Background"
@@ -69,12 +69,11 @@ const CardBackground = (props) => {
       <Card 
           background="product_7_highlight" 
           marginBottom="sm"
-          {...props}
-      >
+          {...props} >
         <Body 
             dark
-            text="Product 7 Highlight"
-        />
+            text="Product 7 Highlight"  
+          />
       </Card>
 
       

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -13,7 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -23,7 +23,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): React.ReactElement => {
+const Checkbox = (props: CheckboxProps): JSX.Element => {
   const {
     aria = {},
     checked = false,
@@ -73,7 +73,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
-    />)
+      />)
   }
 
   return (

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -18,12 +18,12 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
-  dark?: boolean;
-  data?: {[key: string]: string},
+  dark?: Boolean;
+  data?: Object;
   dataLabelHtml?: string;
   dataLabels?: boolean;
   height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   innerSize?: "sm" | "md" | "lg" | "none";
   legend?: boolean;
@@ -180,29 +180,29 @@ const CircleChart = ({
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
-              containerProps={{
+            containerProps={{
               className: classnames("pb_circle_chart", globalProps(props)),
               id: id,
               ...ariaProps,
               ...dataProps,
               ...htmlProps,
             }}
-              highcharts={Highcharts}
-              options={options}
+            highcharts={Highcharts}
+            options={options}
           />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
         <HighchartsReact
-            containerProps={{
+          containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,
             ...htmlProps,
           }}
-            highcharts={Highcharts}
-            options={options}
+          highcharts={Highcharts}
+          options={options}
         />
       )}
     </>

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -13,7 +13,7 @@ type CircleIconButtonProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -12,20 +12,22 @@ import { IconSizes } from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: React.ReactElement | [] | any,
+  children?: JSX.Element | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
-  data?: {[key: string]: string},
+  data?: object,
   icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
+
+
 const Collapsible = ({
   aria = {},
   className,
@@ -40,14 +42,14 @@ const Collapsible = ({
   onClick,
   id,
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps) => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
+  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')