@pingux/astro 2.128.1-alpha.0 → 2.129.0-alpha.1

package/lib/components/Badge/Badge.stories.js

@@ -55,12 +55,14 @@ export default {
   },
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BadgeReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'Icon', 'IconButton']
+      }
     }
   }
 };
@@ -105,17 +107,17 @@ Default.parameters = {
     url: FIGMA_LINKS.badge["default"]
   }
 };
-export var CountBadge = function CountBadge() {
+export var CountBadge = function CountBadge(args) {
   return ___EmotionJSX(Box, {
     isRow: true,
     gap: "xs"
-  }, ___EmotionJSX(Badge, {
+  }, ___EmotionJSX(Badge, _extends({}, args, {
     label: "4",
     variant: "countBadge"
-  }), ___EmotionJSX(Badge, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
     label: "4",
     variant: "countNeutral"
-  }));
+  })));
 };
 CountBadge.parameters = {
   design: {
@@ -123,12 +125,12 @@ CountBadge.parameters = {
     url: FIGMA_LINKS.badge.countBadge
   }
 };
-export var BadgeWithCustomColors = function BadgeWithCustomColors() {
-  return ___EmotionJSX(Badge, {
+export var BadgeWithCustomColors = function BadgeWithCustomColors(args) {
+  return ___EmotionJSX(Badge, _extends({}, args, {
     label: "Custom Colors",
     bg: "green",
     textColor: "#ffffff"
-  });
+  }));
 };
 export var BadgeWithIcon = function BadgeWithIcon() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
@@ -179,6 +181,9 @@ export var BadgeWithIcon = function BadgeWithIcon() {
     }
   })));
 };
+BadgeWithIcon.parameters = {
+  codesandbox: false
+};
 export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   return ___EmotionJSX(Badge, {
     label: "Badge with Icon Button and Left Slot",
@@ -201,26 +206,25 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   })));
 };
+BadgeWithLeftSlotAndIcon.parameters = {
+  codesandbox: false
+};
 export var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({
-    variant: "criticalStatusBadge"
-  }, args, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "criticalStatusBadge",
     label: "Critical",
     mb: "lg"
-  })), ___EmotionJSX(Badge, _extends({
-    variant: "warningStatusBadge"
-  }, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "warningStatusBadge",
     label: "Warning",
     mb: "lg"
-  })), ___EmotionJSX(Badge, _extends({
-    variant: "healthyStatusBadge"
-  }, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "healthyStatusBadge",
     label: "Healthy",
     mb: "lg"
-  })), ___EmotionJSX(Badge, _extends({
-    variant: "activeStatusBadge"
-  }, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "activeStatusBadge",
     label: "Active"
   })));
 };

package/lib/components/Box/Box.stories.js

@@ -17,9 +17,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BoxReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Image', 'Text']
       }
     }
   },
@@ -263,4 +265,7 @@ export var BoxesWithGaps = function BoxesWithGaps() {
     height: 50,
     bg: "decorativeDark.10"
   })));
+};
+BoxesWithGaps.parameters = {
+  codesandbox: false
 };

package/lib/components/Bracket/Bracket.stories.js

@@ -9,20 +9,47 @@ export default {
   component: Bracket,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BracketReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Bracket']
+      }
+    }
+  },
+  argTypes: {
+    isLast: {
+      control: {
+        type: 'boolean'
+      },
+      description: 'If true, the bracket will be displayed as the last one.'
+    },
+    color: {
+      control: {
+        type: 'text'
+      }
+    },
+    variant: {
+      control: false
+    },
+    as: {
+      control: false
+    },
+    role: {
+      control: false
+    },
+    'data-testid': {
+      control: false
     }
   }
 };
-export var Default = function Default() {
+export var Default = function Default(args) {
   return ___EmotionJSX(Box, {
     p: "md",
     ml: "sm"
-  }, ___EmotionJSX(Bracket, null));
+  }, ___EmotionJSX(Bracket, args));
 };
 Default.parameters = {
   design: {

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Item } from 'react-stately';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Breadcrumbs } from '../../index';
+import { Box, Breadcrumbs, Item } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -15,12 +14,15 @@ export default {
   decorators: [withDesign],
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BreadcrumbsReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Breadcrumbs', 'Item'],
+        '@pingux/mdi-react/ChevronRightIcon': 'ChevronRightIcon'
+      }
     }
   },
   argTypes: {
@@ -109,5 +111,6 @@ Overflowing.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };

package/lib/components/Button/Button.stories.js

@@ -6,8 +6,8 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["isConfigured"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,12 +33,16 @@ export default {
   },
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ButtonReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Icon', 'Text'],
+        '@pingux/mdi-react/PlusIcon': 'PlusIcon',
+        '@pingux/mdi-react/CreateIcon': 'CreateIcon'
+      }
     }
   }
 };
@@ -51,10 +55,10 @@ Default.parameters = {
     url: FIGMA_LINKS.button["default"]
   }
 };
-export var Primary = function Primary() {
-  return ___EmotionJSX(Button, {
+export var Primary = function Primary(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
     variant: "primary"
-  }, "Button Text");
+  }), "Button Text");
 };
 Primary.parameters = {
   design: {
@@ -62,10 +66,10 @@ Primary.parameters = {
     url: FIGMA_LINKS.button.primary
   }
 };
-export var Critical = function Critical() {
-  return ___EmotionJSX(Button, {
+export var Critical = function Critical(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
     variant: "critical"
-  }, "Button Text");
+  }), "Button Text");
 };
 Critical.parameters = {
   design: {
@@ -73,16 +77,16 @@ Critical.parameters = {
     url: FIGMA_LINKS.button.critical
   }
 };
-export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+export var InlineButton = function InlineButton(args) {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inline"
-  }, "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimary"
-  }, "Button Text"));
+  }), "Button Text"));
 };
 InlineButton.parameters = {
   design: {
@@ -90,13 +94,13 @@ InlineButton.parameters = {
     url: FIGMA_LINKS.button.inlineButton
   }
 };
-export var TextIconButton = function TextIconButton() {
+export var TextIconButton = function TextIconButton(args) {
   return ___EmotionJSX(Box, {
     width: 20
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     variant: "withIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
     color: "accent.30",
@@ -104,10 +108,10 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     variant: "primaryWithIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     mr: "xs",
     icon: PlusIcon,
     color: "white",
@@ -115,11 +119,11 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
     color: "accent.30",
@@ -127,11 +131,11 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
     color: "accent.30",
@@ -147,10 +151,10 @@ TextIconButton.parameters = {
     url: FIGMA_LINKS.button.textIconButton
   }
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(Button, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
     isDisabled: true
-  }, "Button Text");
+  }), "Button Text");
 };
 Disabled.parameters = {
   design: {

package/lib/components/ButtonBar/ButtonBar.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Button, ButtonBar } from '../../index';
@@ -9,12 +10,14 @@ export default {
   component: ButtonBar,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ButtonBarReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Button', 'ButtonBar']
+      }
     }
   },
   argTypes: {
@@ -46,10 +49,10 @@ Default.parameters = {
     url: FIGMA_LINKS.buttonBar["default"]
   }
 };
-export var RightAligned = function RightAligned() {
-  return ___EmotionJSX(ButtonBar, {
+export var RightAligned = function RightAligned(args) {
+  return ___EmotionJSX(ButtonBar, _extends({}, args, {
     align: "right"
-  }, ___EmotionJSX(Button, {
+  }), ___EmotionJSX(Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -69,8 +72,8 @@ RightAligned.parameters = {
     url: FIGMA_LINKS.buttonBar.rightAligned
   }
 };
-export var Secondary = function Secondary() {
-  return ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
+export var Secondary = function Secondary(args) {
+  return ___EmotionJSX(ButtonBar, args, ___EmotionJSX(Button, {
     variant: "primary",
     "data-id": "save-button",
     onPress: function onPress() {
@@ -95,10 +98,10 @@ Secondary.parameters = {
     url: FIGMA_LINKS.buttonBar.secondary
   }
 };
-export var SecondaryRightAligned = function SecondaryRightAligned() {
-  return ___EmotionJSX(ButtonBar, {
+export var SecondaryRightAligned = function SecondaryRightAligned(args) {
+  return ___EmotionJSX(ButtonBar, _extends({
     align: "right"
-  }, ___EmotionJSX(Button, {
+  }, args), ___EmotionJSX(Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {

package/lib/components/Callout/Callout.stories.js

@@ -6,6 +6,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,12 +27,14 @@ export default {
   argTypes: _objectSpread({}, statusArgTypes),
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CalloutReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Callout', 'Link', 'Text']
+      }
     }
   }
 };
@@ -46,10 +49,10 @@ Default.parameters = {
     url: FIGMA_LINKS.callout["default"]
   }
 };
-export var ErrorStatus = function ErrorStatus() {
-  return ___EmotionJSX(Callout, {
+export var ErrorStatus = function ErrorStatus(args) {
+  return ___EmotionJSX(Callout, _extends({
     status: statuses.ERROR
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
 };
 ErrorStatus.parameters = {
   design: {
@@ -60,10 +63,10 @@ ErrorStatus.parameters = {
 
 // Avoiding using Error as the function name due to it being a JS built-in method
 ErrorStatus.storyName = 'Error';
-export var Success = function Success() {
-  return ___EmotionJSX(Callout, {
+export var Success = function Success(args) {
+  return ___EmotionJSX(Callout, _extends({
     status: statuses.SUCCESS
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
 Success.parameters = {
   design: {
@@ -85,10 +88,10 @@ WithLink.parameters = {
     url: FIGMA_LINKS.callout.withLink
   }
 };
-export var Warning = function Warning() {
-  return ___EmotionJSX(Callout, {
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(Callout, _extends({
     status: statuses.WARNING
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
 Warning.parameters = {
   design: {

package/lib/components/Card/Card.stories.js

@@ -28,6 +28,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CardReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Card', 'Text', 'TextField']
+      }
     }
   },
   argTypes: _objectSpread({}, cardArgTypes),
@@ -38,6 +43,12 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Card, args);
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.card["default"]
+  }
+};
 export var HeaderAndFooter = function HeaderAndFooter(args) {
   var textStyling = {
     fontSize: 'md',
@@ -89,12 +100,6 @@ CardWidth.parameters = {
     url: FIGMA_LINKS.card.cardWidth
   }
 };
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.card["default"]
-  }
-};
 export var CardRow = function CardRow(args) {
   var sx = {
     li: {
@@ -134,7 +139,7 @@ CardRow.parameters = {
     url: FIGMA_LINKS.card.cardRow
   }
 };
-export var InteractiveCard = function InteractiveCard() {
+export var InteractiveCard = function InteractiveCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -142,7 +147,7 @@ export var InteractiveCard = function InteractiveCard() {
     textAlign: 'center',
     maxWidth: '233px'
   };
-  return ___EmotionJSX(Card, {
+  return ___EmotionJSX(Card, _extends({}, args, {
     onPress: function onPress() {
       return console.log('card pressed');
     },
@@ -152,7 +157,7 @@ export var InteractiveCard = function InteractiveCard() {
     tabIndex: "0",
     variant: "cards.interactive",
     sx: sx
-  }, "Interactive Card");
+  }), "Interactive Card");
 };
 InteractiveCard.parameters = {
   design: {
@@ -160,16 +165,16 @@ InteractiveCard.parameters = {
     url: FIGMA_LINKS.card.interactiveCard
   }
 };
-export var WithInteractiveContent = function WithInteractiveContent() {
-  return ___EmotionJSX(Card, {
+export var WithInteractiveContent = function WithInteractiveContent(args) {
+  return ___EmotionJSX(Card, _extends({
     isInteractiveWithin: true
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."), ___EmotionJSX(TextField, {
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."), ___EmotionJSX(TextField, {
     label: "Interactive TextField",
     mt: "md",
     width: "300px"
   }));
 };
-export var ActiveCard = function ActiveCard() {
+export var ActiveCard = function ActiveCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -181,7 +186,7 @@ export var ActiveCard = function ActiveCard() {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
-  return ___EmotionJSX(Card, {
+  return ___EmotionJSX(Card, _extends({}, args, {
     tabIndex: "0",
     variant: "cards.activeCard",
     sx: sx,
@@ -189,5 +194,5 @@ export var ActiveCard = function ActiveCard() {
     onPress: function onPress() {
       return setIsSelected(!isSelected);
     }
-  }, "Active Card");
+  }), "Active Card");
 };