@cambly/syntax-core 5.3.1 → 5.4.0

package/dist/index.d.ts

@@ -475,15 +475,30 @@ declare const ButtonGroup: ({ orientation, size, children, }: {
     children?: ReactNode;
 }) => ReactElement;
 
+declare const CardSizes: readonly ["sm", "lg"];
 /**
  * Card is a basic container component to apply consistent styling and render child components.
  */
-declare const Card: ({ children, }: {
+type CardType = {
+    /**
+     * Test id for the button
+     */
+    "data-testid"?: string;
     /**
      * The child components to render within Card.
      */
     children: JSX.Element;
-}) => JSX.Element;
+    /**
+     * The size of the card
+     *
+     * `sm`: 352px
+     * `lg`: 744px
+     *
+     * @defaultValue sm
+     */
+    size?: (typeof CardSizes)[number];
+};
+declare const Card: ({ children, size, "data-testid": dataTestId, }: CardType) => JSX.Element;
 
 /**
  * Divider is a thin horizontal line to group content in lists and layouts.

package/dist/index.js

@@ -612,8 +612,28 @@ var ButtonGroup_default = ButtonGroup;
 // src/Card/Card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Card = ({
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { rounding: "xl", padding: 7, smPadding: 9, backgroundColor: "white", children });
+  children,
+  size = "sm",
+  "data-testid": dataTestId
+}) => {
+  const sizeWidth = {
+    sm: 352,
+    lg: 744
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Box_default,
+    {
+      rounding: "xl",
+      padding: 7,
+      smPadding: 9,
+      maxWidth: sizeWidth[size],
+      width: "100%",
+      backgroundColor: "white",
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
 var Card_default = Card;
 
 // css-module:./Divider.module.css#css-module