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

package/lib/cjs/components/Box/Box.stories.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;
+export declare const Disabled: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+    args: {
+        isDisabled: {
+            defaultValue: boolean;
+        };
+        bg: {
+            control: {
+                type: string;
+                options: any;
+            };
+            defaultValue: string;
+        };
+        sx: {
+            border: string;
+            borderColor: string;
+            display: string;
+            flexDirection: string;
+            gap: string;
+        };
+    };
+};
+export declare const BoxesWithGaps: {
+    (): React.JSX.Element;
+    parameters: {
+        codesandbox: boolean;
+    };
+};

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

@@ -25,9 +25,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Image', 'Text']
       }
     }
   },
@@ -275,4 +277,7 @@ var BoxesWithGaps = function BoxesWithGaps() {
     bg: "decorativeDark.10"
   })));
 };
-exports.BoxesWithGaps = BoxesWithGaps;
+exports.BoxesWithGaps = BoxesWithGaps;
+BoxesWithGaps.parameters = {
+  codesandbox: false
+};

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

@@ -17,21 +17,48 @@ var _default = {
   component: _index.Bracket,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Bracket["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], 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
     }
   }
 };
 exports["default"] = _default;
-var Default = function Default() {
+var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Box, {
     p: "md",
     ml: "sm"
-  }, (0, _react2.jsx)(_index.Bracket, null));
+  }, (0, _react2.jsx)(_index.Bracket, args));
 };
 exports.Default = Default;
 Default.parameters = {

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

@@ -8,7 +8,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Overflowing = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _reactStately = require("react-stately");
 var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
 var _addonActions = require("@storybook/addon-actions");
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -23,12 +22,15 @@ var _default = {
   decorators: [_storybookAddonDesigns.withDesign],
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Breadcrumbs["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Breadcrumbs', 'Item'],
+        '@pingux/mdi-react/ChevronRightIcon': 'ChevronRightIcon'
+      }
     }
   },
   argTypes: {
@@ -53,17 +55,17 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Breadcrumbs, (0, _extends2["default"])({}, args, {
     onAction: onAction,
     icon: _ChevronRightIcon["default"]
-  }), (0, _react2.jsx)(_reactStately.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     "aria-label": "home",
     "data-id": "home",
     href: "https://www.pingidentity.com",
     key: "home"
-  }, "Home"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Home"), (0, _react2.jsx)(_index.Item, {
     "aria-label": "trendy",
     "data-id": "trendy",
     href: "https://www.pingidentity.com",
     key: "trendy"
-  }, "Trendy"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Trendy"), (0, _react2.jsx)(_index.Item, {
     "aria-label": "march-2020-assets",
     "data-id": "march",
     key: "march 2020 assets"
@@ -83,24 +85,24 @@ var Overflowing = function Overflowing() {
     maxWidth: "385px"
   }, (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     "aria-label": "breadcrumb_1",
     "data-id": "breadcrumb_1",
     href: "https://www.pingidentity.com",
     key: "breadcrumb_1"
-  }, reallyLongText), (0, _react2.jsx)(_reactStately.Item, {
+  }, reallyLongText), (0, _react2.jsx)(_index.Item, {
     "aria-label": "breadcrumb_2",
     "data-id": "breadcrumb_2",
     href: "https://www.pingidentity.com",
     key: "breadcrumb_2"
   }, "Edit")), (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     "aria-label": "breadcrumb_1",
     "data-id": "breadcrumb_1",
     href: "https://www.pingidentity.com",
     key: "breadcrumb_1"
-  }, reallyLongText), (0, _react2.jsx)(_reactStately.Item, {
+  }, reallyLongText), (0, _react2.jsx)(_index.Item, {
     "aria-label": "breadcrumb_1",
     "data-id": "breadcrumb_2",
     href: "https://www.pingidentity.com",
@@ -120,5 +122,6 @@ Overflowing.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };

package/lib/cjs/components/Button/Button.stories.d.ts

@@ -1,28 +1,11 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { ButtonProps } from '../../types';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    decorators: ((...args: any) => any)[];
-    argTypes: any;
-    args: {
-        variant: string;
-        children: string;
-    };
-    parameters: {
-        docs: {
-            source: {
-                type: string;
-            };
-            page: () => React.JSX.Element;
-        };
-    };
-};
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<ButtonProps>;
 export declare const Primary: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -31,7 +14,7 @@ export declare const Primary: {
     };
 };
 export declare const Critical: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -40,7 +23,7 @@ export declare const Critical: {
     };
 };
 export declare const InlineButton: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -49,7 +32,7 @@ export declare const InlineButton: {
     };
 };
 export declare const TextIconButton: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -58,7 +41,7 @@ export declare const TextIconButton: {
     };
 };
 export declare const Disabled: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;

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

@@ -13,8 +13,8 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
@@ -40,12 +40,16 @@ var _default = {
   },
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Button["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Icon', 'Text'],
+        '@pingux/mdi-react/PlusIcon': 'PlusIcon',
+        '@pingux/mdi-react/CreateIcon': 'CreateIcon'
+      }
     }
   }
 };
@@ -60,10 +64,10 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button["default"]
   }
 };
-var Primary = function Primary() {
-  return (0, _react2.jsx)(_index.Button, {
+var Primary = function Primary(args) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     variant: "primary"
-  }, "Button Text");
+  }), "Button Text");
 };
 exports.Primary = Primary;
 Primary.parameters = {
@@ -72,10 +76,10 @@ Primary.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button.primary
   }
 };
-var Critical = function Critical() {
-  return (0, _react2.jsx)(_index.Button, {
+var Critical = function Critical(args) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     variant: "critical"
-  }, "Button Text");
+  }), "Button Text");
 };
 exports.Critical = Critical;
 Critical.parameters = {
@@ -84,16 +88,16 @@ Critical.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button.critical
   }
 };
-var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+var InlineButton = function InlineButton(args) {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inline"
-  }, "Button Text"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimary"
-  }, "Button Text"));
+  }), "Button Text"));
 };
 exports.InlineButton = InlineButton;
 InlineButton.parameters = {
@@ -102,13 +106,13 @@ InlineButton.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button.inlineButton
   }
 };
-var TextIconButton = function TextIconButton() {
+var TextIconButton = function TextIconButton(args) {
   return (0, _react2.jsx)(_index.Box, {
     width: 20
-  }, (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",
     variant: "withIcon"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
     color: "accent.30",
@@ -116,10 +120,10 @@ var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",
     variant: "primaryWithIcon"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }), (0, _react2.jsx)(_index.Icon, {
     mr: "xs",
     icon: _PlusIcon["default"],
     color: "white",
@@ -127,11 +131,11 @@ var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
     color: "accent.30",
@@ -139,11 +143,11 @@ var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
     color: "accent.30",
@@ -160,10 +164,10 @@ TextIconButton.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button.textIconButton
   }
 };
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.Button, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     isDisabled: true
-  }, "Button Text");
+  }), "Button Text");
 };
 exports.Disabled = Disabled;
 Disabled.parameters = {

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

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.SecondaryRightAligned = exports.Secondary = exports.RightAligned = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -17,12 +18,14 @@ var _default = {
   component: _index.ButtonBar,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ButtonBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Button', 'ButtonBar']
+      }
     }
   },
   argTypes: {
@@ -56,10 +59,10 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.buttonBar["default"]
   }
 };
-var RightAligned = function RightAligned() {
-  return (0, _react2.jsx)(_index.ButtonBar, {
+var RightAligned = function RightAligned(args) {
+  return (0, _react2.jsx)(_index.ButtonBar, (0, _extends2["default"])({}, args, {
     align: "right"
-  }, (0, _react2.jsx)(_index.Button, {
+  }), (0, _react2.jsx)(_index.Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -80,8 +83,8 @@ RightAligned.parameters = {
     url: _figmaLinks.FIGMA_LINKS.buttonBar.rightAligned
   }
 };
-var Secondary = function Secondary() {
-  return (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
+var Secondary = function Secondary(args) {
+  return (0, _react2.jsx)(_index.ButtonBar, args, (0, _react2.jsx)(_index.Button, {
     variant: "primary",
     "data-id": "save-button",
     onPress: function onPress() {
@@ -107,10 +110,10 @@ Secondary.parameters = {
     url: _figmaLinks.FIGMA_LINKS.buttonBar.secondary
   }
 };
-var SecondaryRightAligned = function SecondaryRightAligned() {
-  return (0, _react2.jsx)(_index.ButtonBar, {
+var SecondaryRightAligned = function SecondaryRightAligned(args) {
+  return (0, _react2.jsx)(_index.ButtonBar, (0, _extends2["default"])({
     align: "right"
-  }, (0, _react2.jsx)(_index.Button, {
+  }, args), (0, _react2.jsx)(_index.Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {

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

@@ -13,6 +13,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
@@ -33,12 +34,14 @@ var _default = {
   argTypes: _objectSpread({}, _statusProp.statusArgTypes),
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Callout["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Callout', 'Link', 'Text']
+      }
     }
   }
 }; // main
@@ -53,10 +56,10 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.callout["default"]
   }
 };
-var ErrorStatus = function ErrorStatus() {
-  return (0, _react2.jsx)(_index.Callout, {
+var ErrorStatus = function ErrorStatus(args) {
+  return (0, _react2.jsx)(_index.Callout, (0, _extends2["default"])({
     status: _statuses["default"].ERROR
-  }, (0, _react2.jsx)(_index.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), (0, _react2.jsx)(_index.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."));
 };
 exports.ErrorStatus = ErrorStatus;
 ErrorStatus.parameters = {
@@ -68,10 +71,10 @@ ErrorStatus.parameters = {
 
 // Avoiding using Error as the function name due to it being a JS built-in method
 ErrorStatus.storyName = 'Error';
-var Success = function Success() {
-  return (0, _react2.jsx)(_index.Callout, {
+var Success = function Success(args) {
+  return (0, _react2.jsx)(_index.Callout, (0, _extends2["default"])({
     status: _statuses["default"].SUCCESS
-  }, (0, _react2.jsx)(_index.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), (0, _react2.jsx)(_index.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."));
 };
 exports.Success = Success;
 Success.parameters = {
@@ -95,10 +98,10 @@ WithLink.parameters = {
     url: _figmaLinks.FIGMA_LINKS.callout.withLink
   }
 };
-var Warning = function Warning() {
-  return (0, _react2.jsx)(_index.Callout, {
+var Warning = function Warning(args) {
+  return (0, _react2.jsx)(_index.Callout, (0, _extends2["default"])({
     status: _statuses["default"].WARNING
-  }, (0, _react2.jsx)(_index.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), (0, _react2.jsx)(_index.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."));
 };
 exports.Warning = Warning;
 Warning.parameters = {

package/lib/cjs/components/Card/Card.stories.d.ts

@@ -24,7 +24,7 @@ export declare const CardWidth: {
 };
 export declare const CardRow: StoryFn<CardProps>;
 export declare const InteractiveCard: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -32,5 +32,5 @@ export declare const InteractiveCard: {
         };
     };
 };
-export declare const WithInteractiveContent: () => React.JSX.Element;
-export declare const ActiveCard: () => React.JSX.Element;
+export declare const WithInteractiveContent: (args: any) => React.JSX.Element;
+export declare const ActiveCard: (args: any) => React.JSX.Element;

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

@@ -35,6 +35,11 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Card["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Card', 'Text', 'TextField']
+      }
     }
   },
   argTypes: _objectSpread({}, _cardAttributes.cardArgTypes),
@@ -47,6 +52,12 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Card, args);
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.card["default"]
+  }
+};
 var HeaderAndFooter = function HeaderAndFooter(args) {
   var textStyling = {
     fontSize: 'md',
@@ -100,12 +111,6 @@ CardWidth.parameters = {
     url: _figmaLinks.FIGMA_LINKS.card.cardWidth
   }
 };
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.card["default"]
-  }
-};
 var CardRow = function CardRow(args) {
   var sx = {
     li: {
@@ -146,7 +151,7 @@ CardRow.parameters = {
     url: _figmaLinks.FIGMA_LINKS.card.cardRow
   }
 };
-var InteractiveCard = function InteractiveCard() {
+var InteractiveCard = function InteractiveCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -154,7 +159,7 @@ var InteractiveCard = function InteractiveCard() {
     textAlign: 'center',
     maxWidth: '233px'
   };
-  return (0, _react2.jsx)(_index.Card, {
+  return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
     onPress: function onPress() {
       return console.log('card pressed');
     },
@@ -164,7 +169,7 @@ var InteractiveCard = function InteractiveCard() {
     tabIndex: "0",
     variant: "cards.interactive",
     sx: sx
-  }, "Interactive Card");
+  }), "Interactive Card");
 };
 exports.InteractiveCard = InteractiveCard;
 InteractiveCard.parameters = {
@@ -173,17 +178,17 @@ InteractiveCard.parameters = {
     url: _figmaLinks.FIGMA_LINKS.card.interactiveCard
   }
 };
-var WithInteractiveContent = function WithInteractiveContent() {
-  return (0, _react2.jsx)(_index.Card, {
+var WithInteractiveContent = function WithInteractiveContent(args) {
+  return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     isInteractiveWithin: true
-  }, (0, _react2.jsx)(_index.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."), (0, _react2.jsx)(_index.TextField, {
+  }, args), (0, _react2.jsx)(_index.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."), (0, _react2.jsx)(_index.TextField, {
     label: "Interactive TextField",
     mt: "md",
     width: "300px"
   }));
 };
 exports.WithInteractiveContent = WithInteractiveContent;
-var ActiveCard = function ActiveCard() {
+var ActiveCard = function ActiveCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -195,7 +200,7 @@ var ActiveCard = function ActiveCard() {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
-  return (0, _react2.jsx)(_index.Card, {
+  return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
     tabIndex: "0",
     variant: "cards.activeCard",
     sx: sx,
@@ -203,6 +208,6 @@ var ActiveCard = function ActiveCard() {
     onPress: function onPress() {
       return setIsSelected(!isSelected);
     }
-  }, "Active Card");
+  }), "Active Card");
 };
 exports.ActiveCard = ActiveCard;